卧室装修渐变动漫纯CSS风云变幻动画图
怎么样制作这么一个简单的（CSS3动画）静态网页动态图呢？当然如果不限制使用的语言，那实现的方法有很多啦，简单的javaScript语言就可以很容易实现，当然使用框架的话就会更加简单啦。现在让我们用一些更简单单纯的CSS语言来实现。
实现这样的（CSS3动画）静态网页动态图，需要用到哪些东西呢？1、素材：云层
image：云层1.png 云层2.png 云层3.png 也就是需要几张不同的云层图片。
云层1.png
云层2.png
云层3.png
这看似什么也没有的云层，能作出这样美丽的变化图，也是一种美的艺术。
细看之下的云层
2、文档编辑软件：Sublime Text3
Sublime Text3 是一款非常强大的，且非常好用前端常用开发工具之一。大家可以尝试一下。
界面
快捷方式
3、HTML部分： 放置云层图片
主要实现三张图片的布局，所以用三个div标签即可。
<div class="sky"> <div class="clouds_one"></div> <div class="clouds_two"></div> <div class="clouds_three"></div></div>
4、CSS部分：
CSS3动画是什么？动画是使元素从一种样式逐渐变化为另一种样式的效果。可以改变任意多的样式任意多的次数。用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。0% 是动画的开始，100% 是动画的完成。而且为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
该云彩变换过程：通过在设定的开始时间和结束时间之间的特定时间段，设置背景的随时间的样式变换来实现。
解决兼容性问题部分：第一部分：CSS常见兼容性问题解决
html,body{margin:0;padding:0;height:100%;}
第二部分：CSS中动画标签animation 属性兼容性问题解决：
-webkit-animation：； //代表Safari、Chrome等浏览器的私有属性 -moz-animation: ； //代表火狐firefox浏览器私有属性 -o-animation: ； //代表欧朋Opera浏览器私有属性-ms-animation：； //代表IE浏览器的私有属性 animation: ；//自身兼容IE10、Firefox 以及 Opera 等浏览器。
还有其他CSS兼容性问题可参考：CSS样式浏览器兼容性问题归纳
CSS3动画animation标签该标签由三部分组成：
1、关键帧(keyframes) - 定义动画在不同阶段的状态。
2、动画属性(properties) - 决定动画的播放时长，播放次数，以及用何种函 数式去播放动画等。（可以类比音视频播放器）
3、css属性 - 就是css元素不同关键帧下的状态。
Animation
@Keyframes属性
animation-timing-function
-webkit-animation: sky_background 50s ease-out infinite;/*动画过程 时间 以慢速结束 无限循环*/ -webkit-transform: translate3d(0, 0, 0); /*兼容Safari、Chrome等浏览器内核，将其定义为3d转换*/
div盒子模型及布局方式：div盒子的五大主要属性：height、width、padding、margin、border。
div盒子常用布局属性：position: ; 、overflow: ; 等
大div容器.sky的样式如下：.sky { height: 100%; background: #007fd5; position: relative; /*相对定位*/ overflow: hidden; /*超出隐藏*/ -webkit-animation: sky_background 50s ease-out infinite;/*动画播放过程:50s（播放时长）以慢速结束(ease-out) 无限循环(infinite)*/ -moz-animation: sky_background 50s ease-out infinite; -o-animation: sky_background 50s ease-out infinite; animation: sky_background 50s ease-out infinite; -webkit-transform: translate3d(0, 0, 0); //-webkit- Safari、Chrome等 -ms-transform: translate3d(0, 0, 0); //-ms- 代表IE浏览器的私有属性 -o-transform: translate3d(0, 0, 0);//-o- 代表欧朋Opera浏览器私有属性 transform: translate3d(0, 0, 0);}
云层1div块的设置如下：注意：
1、width：300% ； 是为了在播放之时保证能够充分的衔接。
2、position：absolute; 绝对定位。
.sky .clouds_one { background: url("../images/cloud_one.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%;// -webkit-animation: cloud_one 50s linear infinite; //linear：匀速 -moz-animation: cloud_one 50s linear infinite; -o-animation: cloud_one 50s linear infinite; animation: cloud_one 50s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
云层2div块的设置如下：注意：
1、width：300% ； 是为了在播放之时保证能够充分的衔接。
2、position：absolute; 绝对定位。
.sky .clouds_two { background: url("../images/cloud_two.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_two 75s linear infinite; -moz-animation: cloud_two 75s linear infinite; -o-animation: cloud_two 75s linear infinite; animation: cloud_two 75s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
云层3div块的设置如下：注意：
1、width：300% ； 是为了在播放之时保证能够充分的衔接。
2、position：absolute; 绝对定位。
.sky .clouds_three { background: url("../images/cloud_three.png"); position: absolute; left: 0; top: 0; height: 100%; width: 300%; -webkit-animation: cloud_three 100s linear infinite; -moz-animation: cloud_three 100s linear infinite; -o-animation: cloud_three 100s linear infinite; animation: cloud_three 100s linear infinite; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); -o-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}
设置动画的关键帧@KeyFrames：开始-中间-结束按钮 转化为 0%--50%--100%，我们又可叫做进度条。在不同阶段设置不同的背景色，是整个过程 呈现渐变动画状态。
注意：@ ：千万不能丢掉
大的div（.sky）关键帧设置：@-webkit-keyframes sky_background { //可以把其他几个兼容内核按照这个模板罗列 0% { //-o- 、-ms-、-moz- 和自身兼容 background: #007fd5; // 起点 color: #007fd5 ; //起点 } 50% { background: #000; //转折点 color: #a3d9ff ; //转折点 } 100% { background: #007fd5; //起点 color: #007fd5; //起点 }}
云层div块的关键帧设置：云层设置只用设置开始和结束的位置即可
@-webkit-keyframes cloud_one { //同上 0% { left: 0 } 100% { left: -200% //保证完美衔接 }}@-webkit-keyframes cloud_two { 0% { left: 0 } 100% { left: -200% }}@-webkit-keyframes cloud_three { 0% { left: 0 } 100% { left: -200% }}
经过这些简单的设置，一个云彩变换的动画就可以展示出来了。 总结一下用到的动画关键属性：
animation：
animation: name duration timing-function delay iteration-count direction;
transform：
transform: none|transform-functions;
keyframes：
@keyframes animationname {keyframes-selector {css-styles;}/*0%{} 50%{} 100%{}*/}
position：
position：absolute /relative;
注意： 一般动画animation 和 @KeyFrames是联合使用的。
点击扩展链接可查看源码。
本文部分内容参考网络，如有错误，感谢指出，如有侵权，请联系修改。