一. 实现思路
耳朵,耳朵尖,头部,脸夹,眼睛,眼珠子,鼻子,可爱的小嘴,舌头涉及到的CSS3属性,radial-gradient 的背景填充,animation 的耳朵尖动画,头部border-radius的圆角边框,右下角box-shadow的阴影显示,眼睛和眼珠子的定位,这里采用了::before,鼻子类似于用css实现一个三角形的写法,15px solid transparent ,脸夹是背景颜色的设置,圆角边框的实现,以及定位,小嘴巴涉及到了 box-shadow :inset 0px -4px 0 #1b1919 的阴影,或者做一个圆角也可以实现。
HTML部分源代码
<div class="pikachu">
<div class="left-ear"></div>
<div class="right-ear"></div>
<div class="head">
<div class="left-eye"></div>
<div class="right-eye"></div>
<div class="nose"></div>
<div class="left-cheek"></div>
<div class="right-cheek"></div>
<div class="lips"></div>
<div class="mouth"></div>
</div>
</div>
CSS源代码
<style> /* 开始样式标签 */
body {
display: flex; /* 设置为弹性布局 */
height: 100vh; /* 高度占据视口的100% */
width: 100vw; /* 宽度占据视口的100% */
align-items: center; /* 垂直居中 */
justify-content: center; /* 水平居中 */
background: linear-gradient(#f2fcff, #b9e4f7); /* 背景线性渐变 */
overflow: hidden; /* 溢出隐藏 */
}
.pikachu {
position: relative; /* 相对定位 */
}
@media (max-width: 600px) {
.pikachu {
transform: scale(0.5); /* 在小于600px宽度时缩小为50% */
}
}
.head {
position: relative; /* 相对定位 */
margin-top: 200px; /* 顶部边距为200px */
width: 370px; /* 宽度为370px */
height: 330px; /* 高度为330px */
background: #ffd01c; /* 背景色 */
border: 4px solid #1b1919; /* 边框 */
border-radius: 45%; /* 边框圆角 */
overflow: hidden; /* 溢出隐藏 */
box-shadow: inset -10px -8px 0 #d8851c; /* 内阴影 */
}
.left-eye,
.right-eye {
position: absolute; /* 绝对定位 */
width: 70px; /* 宽度为70px */
height: 70px; /* 高度为70px */
background-color: #1b1919; /* 背景色 */
border-radius: 50%; /* 边框圆角 */
top: 40%; /* 顶部位置为父容器的40% */
}
.left-eye::before,
.right-eye::before {
content: ""; /* 伪元素内容为空 */
position: absolute; /* 绝对定位 */
width: 30px; /* 宽度为30px */
height: 30px; /* 高度为30px */
background-color: white; /* 背景色 */
border-radius: 50%; /* 边框圆角 */
top: 10%; /* 顶部位置为父容器的10% */
animation: 0.2s infinite shaking; /* 动画效果 */
}
.left-eye {
left: 20%; /* 左侧位置为父容器的20% */
}
.left-eye::before {
left: 40%; /* 左侧位置为父容器的40% */
}
.right-eye {
right: 20%; /* 右侧位置为父容器的20% */
}
.right-eye::before {
right: 40%; /* 右侧位置为父容器的40% */
}
.nose {
position: relative; /* 相对定位 */
width: 0; /* 宽度为0 */
height: 0; /* 高度为0 */
border-top: 10px solid #1b1919; /* 上边框 */
border-left: 15px solid transparent; /* 左边框透明 */
border-right: 15px solid transparent; /* 右边框透明 */
border-bottom: 10px solid transparent; /* 下边框透明 */
border-radius: 8px; /* 边框圆角 */
margin: auto; /* 外边距自动 */
top: 60%; /* 顶部位置为父容器的60% */
}
.left-cheek,
.right-cheek {
position: absolute; /* 绝对定位 */
width: 80px; /* 宽度为80px */
height: 80px; /* 高度为80px */
background-color: #fb1412; /* 背景色 */
border: 4px solid #1b1919; /* 边框 */
border-radius: 50%; /* 边框圆角 */
top: 60%; /* 顶部位置为父容器的60% */
}
.left-cheek {
left: -5%; /* 左侧位置为父容器的-5% */
}
.right-cheek {
right: -5%; /* 右侧位置为父容器的-5% */
}
.lips {
display: block; /* 显示为块级元素 */
position: relative; /* 相对定位 */
margin: auto; /* 外边距自动 */
width: 1px; /* 宽度为1px */
height: 1px; /* 高度为1px */
top: 60%; /* 顶部位置为父容器的60% */
z-index: 2; /* 层级 */
}
.lips::after, .lips::before {
position: absolute; /* 绝对定位 */
content: ""; /* 伪元素内容为空 */
top: -20px; /* 顶部位置为-20px */
width: 50px; /* 宽度为50px */
height: 40px; /* 高度为40px */
border-radius: 50%; /* 边框圆角 */
box-shadow: inset 0px -4px 0 #1b1919; /* 内阴影 */
background-color: #ffd01c; /* 背景色 */
}
.lips::before {
right: 0px; /* 右侧位置为0px */
}
.lips::after {
left: 0px; /* 左侧位置为0px */
}
.mouth {
position: relative; /* 相对定位 */
height: 60px; /* 高度为60px */
width: 60px; /* 宽度为60px */
margin: auto; /* 外边距自动 */
top: 60%; /* 顶部位置为父容器的60% */
border: 4px solid #1b1919; /* 边框 */
border-radius: 0 0 50% 50%; /* 边框圆角 */
z-index: 1; /* 层级 */
background-image: radial-gradient(circle at center 80%, #e93c4e 0%, #e93c4e 50%, #9e2d38 50%, #9e2d38 60%, #1b1919 60%, #1b1919 65%, #5c0009 65%); /* 背景渐变 */
background-position: 80% center; /* 背景位置 */
}
.left-ear,
.right-ear {
position: absolute; /* 绝对定位 */
height: 450px; /* 高度为450px */
width: 70px; /* 宽度为70px */
background: #ffd01c; /* 背景色 */
border-radius: 50%; /* 边框圆角 */
border: 4px solid #1b1919; /* 边框 */
box-shadow: inset -4px -120px 0 #d8851c; /* 内阴影 */
}
.right-ear {
right: 10px; /* 右侧位置为10px */
transform: rotate(12deg); /* 旋转12度 */
background-image: radial-gradient(circle at -100% 45%, #ffd01c 0%, #ffd01c 60%, black 60%); /* 背景渐变 */
}
.left-ear {
left: 10px; /* 左侧位置为10px */
transform: rotate(-50deg); /* 旋转-50度 */
background-image: radial-gradient(circle at 200% 45%, #ffd01c 0%, #ffd01c 60%, black 60%); /* 背景渐变 */
animation: 5s 5s infinite wiggle; /* 动画效果 */
animation-fill-mode: forwards; /* 动画填充模式 */
animation-direction: alternate; /* 动画方向 */
}
@keyframes shaking {
from {
transform: translateX(0%); /* 从0%位置开始移动 */
}
to {
transform: translateX(2%); /* 移动到2%位置 */
}
}
@keyframes wiggle {
0% {
transform: rotate(-50deg); /* 旋转-50度 */
}
5% {
transform: rotate(-60deg); /* 旋转-60度 */
}
10% {
transform: rotate(-50deg); /* 旋转-50度 */
}
12% {
transform: rotate(-55deg); /* 旋转-55度 */
}
15% {
transform: rotate(-50deg); /* 旋转-50度 */
}
100% {
transform: rotate(-50deg); /* 旋转-50度 */
}
}
</style> /* 结束样式标签 */
最终画出了可爱的皮卡丘,快拿到代码去感受一下吧。