微信小程序实现登录页云层漂浮的动画效果
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了微信小程序实现登录页云层漂浮的动画效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2079字，纯文字阅读大概需要3分钟。
内容图文
前言
2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。
上效果图(GIF动态图)
当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。
知识点
认识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)
实现
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);
}
}
其中rpx是微信特有的属性，不受屏幕大小的影响，类似于安卓里的dp单位。keyframes是匀速移动，从css里可以看到只改变了左右方向。
2.头像本来想加个吊篮，像荡秋千一样的荡漾，但是没有成功，只是随便搞了个飘来飘去的动画。
代码如下
@keyframes pic {
0% {
transform: translate3d(0, 20rpx, 0) rotate(-15deg);
}
15% {
transform: translate3d(0, 0rpx, 0) rotate(25deg);
}
36% {
transform: translate3d(0, -20rpx, 0) rotate(-20deg);
}
50% {
transform: translate3d(0, -10rpx, 0) rotate(15deg);
}
68% {
transform: translate3d(0, 10rpx, 0) rotate(-25deg);
}
85% {
transform: translate3d(0, 15rpx, 0) rotate(15deg);
}
100% {
transform: translate3d(0, 20rpx, 0) rotate(-15deg);
}
}
没想到keyframes不仅有支持from to还支持百分比，不错。这里，只要控制好层级关系、动画时长、透明度即可实现云层漂浮。
总结
不得不说css还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。
好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持。
内容总结
以上是互联网集市为您收集整理的微信小程序实现登录页云层漂浮的动画效果全部内容，希望文章能够帮你解决微信小程序实现登录页云层漂浮的动画效果所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。