一、动画模块连写
1.animation：动画名称 动画时长 动画运动速度 延迟时间 重复次数 是否循环往复
2.简写：animation:动画名称 动画时长；
<style>
*{
padding:0;
margin:0;
}
div{
width: 100px;
height: 50px;
background-color: red;
animation:move 1s linear 1s 2 normal;
/*动画名称 持续时间 运动速度 延迟时间 重复次数 是否循环往复*/
}
@keyframes move{
from{
margin-left:0;
}
to{
margin-left:500px;
}
}
..........省略代码...........
<div></div>
二、云层图片
1.注意点：（1）反向移动；（2）利用li的四倍距离，能充分得动覆盖；（3）调整移动速度两种：一种直接调整运动的速度，一种是移动的幅度，也是移动的距离；（4）颜色也可以渐变。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>D179_CloudAnimation</title> <style> *{ margin:0; padding:0; } ul{ height: 396px; background-color: skyblue; margin-top:100px; animation:change 5s linear 0s infinite alternate;/*infinite代表无限次的执行难下去*/ position:relative; } ul li { width: 400%;/*复习了百分比的表示方式,这个四百很重要*/ /*因为有三个li标签，并且宽度变化最多是三倍，因此，我们的li需要有四倍，完成它的延展长度*/ height: 350px; position:absolute; left:0; top:22px; list-style: none; } ul li:nth-child(1){ background-image: url("image/play_tennis2.jpg"); animation:one 10s linear 0s infinite alternate; } ul li:nth-child(2){ background-image: url("image/play_tennis2.jpg"); animation:two 10s linear 0s infinite alternate; } ul li:nth-child(3){ background-image: url("image/play_tennis2.jpg"); animation:three 10s linear 0s infinite alternate; } @keyframes change { form{ background-color: skyblue; } to { background-color: grey; } } @keyframes one { from{ margin-left:0; } to{ margin-left:-100%;/*这里都是反向移动也就是向左移动，如果向右移动，那么左边就会有空白出现了*/ } } @keyframes two { from{ margin-left:0; } to{ margin-left:-200%; } } @keyframes three { from{ margin-left:0; } to{ margin-left:-300%; } } </style> </head> <body> <ul> <li></li> <li></li> <li></li> </ul> </body> </html>
三、源码：
D178_AnimationWritingContinuely.html
D179_CloudAnimation.html
地址:
https://github.com/ruigege66/HTML_learning/blob/master/D178_AnimationWritingContinuely.html
https://github.com/ruigege66/HTML_learning/blob/master/D179_CloudAnimation.html
2.CSDN：https://blog.csdn.net/weixin_44630050
3.博客园：https://www.cnblogs.com/ruigege0000/
4.欢迎关注微信公众号：傅里叶变换，个人账号，仅用于技术交流，后台回复“礼包”获取Java大数据学习视频礼包
