实现的皮卡丘样式以下图:
本篇内容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);
}