效果预览
https://codepen.io/strugglingBoy/pen/ReRjqr
代码下载
https://github.com/enstrongbill/daily-frontend-exercise/tree/master/022-ghost
代码解读
啊飘是通过两个上半园和下半园合在一起形成的,眼睛和嘴巴是通过伪元素所形成的
1.html代码
定义了一个.ghost的容器,里面放着啊飘的头.head和啊飘的身体.body
<div class="ghost">
<div class="head"></div>
<div class="body"></div>
</div>
2.css代码
啊飘头部的制作
.head {
width: 200px;
height: 100px;
border-radius: 100px 100px 0 0;
background-color: whitesmoke;
}
啊飘眼睛的制作
.head::before,
.head::after {
content: '';
width: 20px;
height: 40px;
border-radius: 50%;
position: absolute;
background-color: #ccc;
}
啊飘身体的制作
.body {
width: 240px;
height: 100px;
border-radius: 0 0 100px 100px;
background-color: whitesmoke;
position: absolute;
top: 99px;
left: -40px;
}
啊飘嘴巴的制作
.body::before {
content: '';
width: 30px;
height: 40px;
border-radius: 50%;
position: absolute;
right: 70px;
top: 10px;
background: #ccc;
}
啊飘上下飘动动画的制作,
若是不太了解transform中多值动画是什么流程的,可以点击这里
@keyframes move {
from {
transform: rotate(360deg) translateX(1.125em) rotate(-360deg);
}
to {
transform: rotate(-360deg) translateX(1.125em) rotate(360deg);
}
}
啊飘透明的动画的制作
@keyframes indistinct {
0% {
opacity: .8;
}
50% {
opacity: .4;
}
100% {
opacity: .8;
}
}
最后大功告成