微信小程序实现登录页云层漂浮的动画效果

发布时间：2020-12-14 20:17:17 所属栏目：资源来源：网络整理

导读：前言 2017年前端火了，微信小程序、weex、reactnative，就连支付宝也搞起了小程序，总感觉这是原生要毁灭的节奏啊，我也乘热上车万一波。上效果图(GIF动态图) 当我看到这张背景图的时候，强迫症立马来了，这云朵为什么不动，于是开始了一波折腾。知识点认

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

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

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

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

translate3d(1,1,0)

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

rotate3d(1,45deg)

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

@keyframes cloud {
from {
transform: translate3d(-125rpx,0);
}

to {
transform: translate3d(180rpx,0);
}
}

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

2.头像本来想加个吊篮，像荡秋千一样的荡漾，但是没有成功，只是随便搞了个飘来飘去的动画。

代码如下

没想到keyframes不仅有支持from to还支持百分比，不错。这里，只要控制好层级关系、动画时长、透明度即可实现云层漂浮。

不得不说css还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。

好了，以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对编程之家的支持。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!