就如配图所未，又到了月黑风高的晚上 ！！

基于上一篇css动画基础，我们来实现一个更炫的效果。这个月亮可是会动的哦，而且云和月亮并不是图片，是纯css3画出来的哦，动画即是通过css3的keyframes来实现。有没有一种吊炸天的感觉。

月亮代码：

.moon{
	width:100px;
	height:100px;
	border-radius:100%;
	background:#ffe400;
	position:absolute;
	left:90px;
	top:83px;
	z-index:3;
	box-shadow:-3px 0px 10px 5px rgba(0,0,0,.3);
	animation:moonmove 6s ease .1s infinite;
	-webkit-animation:moonmove 6s ease .1s infinite;
}

云代码：

.cloud{
	left:62px;
	top:181px;
	z-index:5;
	width:50px;
	position:absolute;
	height:54px;
	background:#fff3da;
	border-radius:50px 50px 0 0;
	animation:cloudmove 10s ease .1s infinite;
	-webkit-animation:cloudmove 10s ease .1s infinite;
}
.cloud::before{
	content:'';
	width:20px;
	height:38px;
	background:#fff3da;
	border-radius:50px 0 0 50px;
	position:absolute;
	left:-18px;
	bottom:0;
}
.cloud::after{
	content:'';
	width:16px;
	height:35px;
	background:#fff3da;
	border-radius:0 50px 50px 0;
	position:absolute;
	right:-15px;
	bottom:0;
}

动画效果即之前讲的keyframes实现。

效果如下：