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

前言

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还是有很多动画的，也有很多特效，微信小程序里加一点动画，能使页面稍微美观点。当然，复杂点的动画，只能有机会再更新。

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

# 微信小程序 # 漂浮 # 动画 # 微信小程序登录demo # 微信小程序实现元素渐入渐出动画效果封装方法 # 微信小程序小程序制作及动画（animation样式）详解 # 微信小程序的动画效果详解 # 微信小程序连续旋转动画（this.animation.rotate）详解 # 微信小程序实现animation动画 # 微信小程序scroll-view组件实现滚动动画 # 微信小程序loading组件显示载入动画用法示例【附源码下载】 # 微信小程序开发animation心跳动画效果 # 微信小程序开发之录音机音频播放动画实例 (真机可用) # 微信小程序实现渐入渐出动画效果 # 里加 # 是一个 # 这是 # 吊篮 # 我也 # 来了 # 也有 # 好了 # 你可以 # 是有 # 当我 # 这张 # 不受 # 不动 # 就连 # 可以看到 # 他都 # 这篇文章 # 特有的 # 能使

返回目录在线咨询

上一篇：解决Linode服务器常见的网络连接问题的方法有哪些？
下一篇：Golang如何测试错误处理逻辑_Golang单元测试与错误断言技巧

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

全网整合营销服务商

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

您的项目需求