这是我参与新手入门的第1篇文章
云彩浮动变幻效果
前言
夏至雨霖霖，冬至雪翩翩。
清泽如蝉翼，厚泽染墨渲。
风起瞬息变，世事皆无常。
云心锁清愁，千古云依旧!
云——千百年来一直让人仰望。孤独时仰望于它，虽然孤独依旧缠绕;幸福时仰望于它，期待幸福更久远!
云——神秘却又毫无保留地将自己呈现给大家，时而安静慈祥;时而深厚内敛;时而流溢着多情;时而散发着妩媚;时而热情如火焰;时而孩子般顽皮，悠闲自在地俯视着大地，忙忙碌碌的人们。
想变成天上忽明忽暗的云吗？来跟我一起实现它吧！！！
准备工作
需要准备的素材其实很简单，三张不同层次的云彩图片就可以。
云彩图片1
云彩图片2
云彩图片3
由于图片都是白色透明的，展示出来基本一片空白，就弄成链接点开吧。。。。。。。
开始实现
- 第一步
先来实现个天空的背景。
准备一个宽100%，高度400px，背景色#007fd5，使用相对定位position:relative,溢出属性overflow:hidden的div就可以。
- 第二步
接着来把三个云彩图片放在天空的容器下。
准备三个宽是天空3倍，高跟天空一样的，使用绝对定位position:absolute;top:0px,left:0px,分别使用三张云彩图片做背景的div按顺序放在天空的div下就可以。
- 第三步
这是最重要的一步啦，给设计动画,使用@keyframes属性。
1、先是天空的动画,效果是天空颜色明暗交替变幻。
用@keyframes描述动画效果规则，动画名称change，初始动画天空背景色#007fd5，中间动画天空背景色#000，结束动画天空背景色变回#007fd5
2、然后就是云彩运动的动画，效果是向左移动。
用@keyframes描述动画效果规则，动画名称run，初始动画云彩位置是left:0px;top:0px,结束动画云彩位置是left:-100%;top:0px;
- 第四步
前面准备工作都做完了，那怎么让他动起来呢？那就要用到animation这个动画属性了。
animation 属性是一个简写属性，用于设置六个动画属性,我们先来了解一下：
animation-name:规定需要绑定到选择器的 keyframe 名称
animation-duration:规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function:规定动画的速度曲线
animation-delay:规定在动画开始之前的延迟
animation-iteration-count:规定动画应该播放的次数
animation-direction:规定是否应该轮流反向播放动画
- 第五步
完事具备，只欠东风了，我们来让动画跑起来吧。
首先是天空的动画，动画名称change，完成动画所花费的时间5s，动画的速度曲线ease-out（低速开始），动画应该播放的次数infinite(无限次),动画开始之前的延迟和是否应该轮流反向播放动画我们这里不需要，所以不用添加值也可以。
然后是云彩的动画，动画名称run，完成动画所花费的时间为了让三张云彩图片有层次重叠感分别给值是5s、7s、10s，其他值跟天空的动画一样就好了。
- 第六步
最后就是见证奇迹的时刻啦！！！
总结
第一次写文章，整了一天时间，对于我这种文笔不好的人，真的是太难了！！！个人感觉也不是很好，希望大家不要太挑剔我，哈哈。。。。
这个也是我初学css3的时候学习的，效果还是可以看看的，动画的时间大家可以根据自己的喜好调整，可快可慢。
最后附上css代码
*{margin:0;padding:0};
body{background:#12b9ff;text-align:center}
.sky{width:100%;height:400px;background:#007fd5;position:relative;overflow:hidden;animation:change 5s ease-out infinite;-moz-animation:change 5s ease-out infinite;-webkit-animation:change 5s ease-out infinite;-ms-animation:change 5s ease-out infinite}
.colund1{width:300%;height:400px;background:url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8e613ca836c841f9941c46a8a5817457~tplv-k3u1fbpfcp-watermark.image);position:absolute;top:0;left:0;animation:run 5s ease-out infinite;-moz-animation:run 5s ease-out infinite;-webkit-animation:run 5s ease-out infinite;-ms-animation:run 5s ease-out infinite}
.colund2{width:300%;height:400px;background:url(https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0c3e2ea6459d4b338681a5dbcd362abb~tplv-k3u1fbpfcp-watermark.image);position:absolute;top:0;left:0;animation:run 7s ease-out infinite;-moz-animation:run 7s ease-out infinite;-webkit-animation:run 7s ease-out infinite;-ms-animation:run 7s ease-out infinite}
.colund3{width:300%;height:400px;background:url(https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/ba731db637f947af9f072d6cdda2ae32~tplv-k3u1fbpfcp-watermark.image);position:absolute;top:0;left:0;animation:run 10s ease-out infinite;-moz-animation:run 10s ease-out infinite;-webkit-animation:run 10s ease-out infinite;-ms-animation:run 10s ease-out infinite}
@keyframes change{
0%{background:#007fd5}
50%{background:#000}
100%{background:#007fd5}
}
@-moz-keyframes change{
0%{background:#007fd5}
50%{background:#000}
100%{background:#007fd5}
}
@-webkit-keyframes change{
0%{background:#007fd5}
50%{background:#000}
100%{background:#007fd5}
}
@-ms-keyframes change{
0%{background:#007fd5}
50%{background:#000}
100%{background:#007fd5}
}
@keyframes run{
0%{left:0;top:0}
100%{left:-100%;top:0}
}
@-moz-keyframes run{
0%{left:0;top:0}
100%{left:-100%;top:0}
}
@-webkit-keyframes run{
0%{left:0;top:0}
100%{left:-100%;top:0}
}
@-ms-keyframes run{
0%{left:0;top:0}
100%{left:-100%;top:0}
}
