小程序登录页飘云动画如何实现

       自小程序出现以来，其应用领域逐渐扩大，只增不减。不管是企业还是个人，都找南昌小程序开发公司做小程序。当然了，由于行业不同，企业或者个人做的小程序功能也各有不同。就拿登录页来说，有些客户想要在头像背景图中出现飘云动画，那么这该如何实现呢？下面一起来学习一下吧！

       一、animation介绍

       animation 属性是一个简写属性，用于设置六个动画属性：

       值描述 

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

       二、translate介绍

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

       translate3d(1,1,0)

       你可以理解为（左右，上下，大小）变化。

       rotate3d(1,1,0,45deg)

       三、实现方法

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

       code

       .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);

       }

       }

       其中rpx是微信特有的属性，不受屏幕大小的影响，类似于安卓中的dp单位。keyframes是匀速移动，从css里可以看到只改变了左右方向。