[003]-css实现啊飘

效果预览

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

最后大功告成