[b]前言[/b] 2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。 [b]上效果图(GIF动态图)[/b] [img]http://files.jb51.net/file_images/article/201705/201755112148092.gif?20174511223[/img] 当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。 [b]知识点[/b] [b]认识animation[/b] animation 属性是一个简写属性，用于设置六个动画属性：

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称
animation-duration	规定完成动画所花费的时间，以秒或毫秒计
animation-timing-function	规定动画的速度曲线
animation-delay	规定在动画开始之前的延迟
animation-iteration-count	规定动画应该播放的次数
animation-direction	规定是否应该轮流反向播放动画

[b]认识translate[/b] 方法特别多，本文主要用2个。 [list] [*][code]translate3d(x,y,z)[/code]定义 3D 缩放转换。[/*] [*][code]rotate3d(x,y,z,angle) [/code]定义 3D 旋转。[/*] [/list] [code]translate3d(1,1,0) [/code] 你可以理解为（左右，上下，大小）变化。 [code]rotate3d(1,1,0,45deg)[/code] [img]http://files.jb51.net/file_images/article/201705/201755112305940.png?201745112314[/img] [b]实现[/b] 1.两朵云除了大小和初始位置不通，其他都相同。 其中rpx是微信特有的属性，不受屏幕大小的影响，类似于安卓里的dp单位。keyframes是匀速移动，从css里可以看到只改变了左右方向。 2.头像本来想加个吊篮，像荡秋千一样的荡漾，但是没有成功，只是随便搞了个飘来飘去的动画。 [img]http://files.jb51.net/file_images/article/201705/201755112815317.jpg?201745112838[/img] 代码如下 没想到keyframes不仅有支持from to还支持百分比，不错。这里，只要控制好层级关系、动画时长、透明度即可实现云层漂浮。 [b]总结[/b] 不得不说css还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。 好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程素材网的支持。