(作者：杨东升，撰写时间：2019年2月13日)
我们都知道Javascript可以实现很多的动画效果，但方法比较复杂，所以简单的动画效果一般用Css3来完成，比如这个运动的云就是Css3动画效果来完成的：
用到的图片（因为比较透明，所以不是很明显）：
第一张：
第二张:
第三张：
源代码部分：
Css部分：
背景：
.sky{
height: 480px;
background: #007fd5;
position: relative;
overflow: hidden;
animation: sky_background 50s ease-out infinite;/1.关键帧 keyframes 2.动画播放时间 3.动画播放方式 4.动画播放次数：无限播放/
transform: translate3d(0,0,0)
}
@keyframes sky_background{
0% {
background: #007fd5;
color: #007fd5
}
25%{
background: #000;
color:#000;
}
50% {
background: #f00100;
color: #f00100;
}
75%{
background: #000;
color: #a3d9ff;
}
100% {
background: #ddd;
color: #ddd;
}
}
第一张图片部分：
.clouds_one{
background: url("./…/images/images/cloud_one.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: cloud_one 50s linear infinite;
transform: translate3d(0,0,0)
}
@keyframes cloud_one{
0% {
left: 0
}
100% {
left: -200%
}
}
第一张图片部分：
.clouds_two{
background: url("./…/images/images/cloud_two.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: cloud_two 75s linear infinite;
transform: translate3d(0,0,0)
}
@keyframes cloud_two{
0%{
left: 0
}
100%{
left: -200%
}
}
第一张图片部分：
.clouds_three{
background: url("./…/images/images/cloud_three.png");
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 300%;
animation: cloud_three 100s linear infinite;
transform: translate3d(0,0,0)
}
@keyframes cloud_three{
0%{
left: 0
}
100%{
left: -200%
}
}
原理就是让背景变颜色，再让三张图片以不同的速度运动，这样就可以实现运动的云了。