绵阳梓潼网站制作公司

怎么实现微信小程序的登录页面有云朵悬浮的动态效果

小编给大家分享一下怎么实现微信小程序的登录页面有云朵悬浮的动态效果，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

10多年的大石桥网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。全网整合营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整大石桥建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。创新互联从事“大石桥网站设计”,“大石桥网站推广”以来，每个客户项目都认真落实执行。

小程序实现登录页云层漂浮动画效果的方法：

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

以上是“怎么实现微信小程序的登录页面有云朵悬浮的动态效果”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！


文章标题：怎么实现微信小程序的登录页面有云朵悬浮的动态效果
分享地址：http://myzitong.com/article/pjppeh.html

其他资讯