微信小程序怎么实现登录页云层漂浮动画效果-创新互联

这篇“微信小程序怎么实现登录页云层漂浮动画效果”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“微信小程序怎么实现登录页云层漂浮动画效果”文章吧。

创新互联服务项目包括宝丰网站建设、宝丰网站制作、宝丰网页制作以及宝丰网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,宝丰网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到宝丰省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!

上效果图(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还支持百分比,不错。这里,只要控制好层级关系、动画时长、透明度即可实现云层漂浮。

以上就是关于“微信小程序怎么实现登录页云层漂浮动画效果”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。

本文题目:微信小程序怎么实现登录页云层漂浮动画效果-创新互联
地址分享:https://www.cdcxhl.com/article6/ceesig.html

成都网站建设公司_创新互联,为您提供面包屑导航移动网站建设小程序开发网站建设外贸网站建设网站导航

广告

声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联

h5响应式网站建设