html5做一个皮卡丘,画一只会动的皮卡丘(上)

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

本篇内容List:

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

tip2--实现鼻子

tip3--实现眼睛

tip4--实现脸颊

tip5--嘴巴实现

a98328b87f4c48d3b44670f231eaa59a.gif

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);

}

你可能感兴趣的:(html5做一个皮卡丘)