html5做一个皮卡丘,画一只会动的皮卡丘（上）

实现的皮卡丘样式以下图：

本篇内容List：

tip1--全局样式初始化，配置

tip2--实现鼻子

tip3--实现眼睛

tip4--实现脸颊

tip5--嘴巴实现

1.先进行页面总体的样式配置

这里咱们要在手机端展现，因此咱们尽可能整个图形的宽度要小于手机屏幕的最小宽度，代码以下：

* {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::before {

margin: 0;

padding: 0;

box-sizing: border-box;

}

*::after {

margin: 0;

padding: 0;

box-sizing: border-box;

}

//设置body样式使内容居中等

body {

width: 100%;

height: 100vh;

background-color: yellow;

border: 1px solid green;

display: flex;

justify-content: center;

align-items: center;

}

//为咱们须要画图的主体区域

.wrapper {

width: 100%;

height: 220px;

position: relative;

}

2.鼻子的绘画

利用一个div盒子宽高等于0，而后给予边宽来撑大盒子，再取消不须要的边框，就能够实现一个圆饼的效果，代码以下

.nose {

width: 0;

height: 0;

border: 11px solid red;

border-radius: 12px;

border-color: black transparent transparent transparent;

position: absolute;

left: 50%;

top: 28px;

transform: translate(-12px);

}