微信小程序登录页：CSS实现动画云层漂浮

微信小程序登录页：CSS实现动画云层漂浮
前言 2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。 上效果图(GI动态图) 当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。 知识点 认识animation animation 属性是一个简写属性，用于设置六个动画属性：值 描述animationname ...
前言

2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。

上效果图(GI动态图)

微信小程序动画

当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。

知识点认识animation

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

认识translate

方法特别多，本文主要用2个。

translate3d(x,y,z)定义 3D 缩放转换。

rotate3d(x,y,z,angle)    定义 3D 旋转。

translate3d(1,1,0)你可以理解为（左右，上下，大小）变化。rotate3d(1,1,0,45deg)

rotate3d

实现

1.两朵云除了大小和初始位置不通，其他都相同。

.cloud {  position: absolute;  z-index: 3;  width:99px;height:64px; top: 0;   right: 0;  bottom: 0;  animation: cloud 5s linear infinite;}@keyframes cloud {  from {    transform: translate3d(-125rpx, 0, 0);  }  to {    transform: translate3d(180rpx, 0, 0);  }}