登录  /  注册

让微信小程序的登陆页面有云朵悬浮的动态效果

巴扎黑
发布: 2017-05-14 14:06:49
原创
6178人浏览过

摘要: 微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等。最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文章 ...

微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等。最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们51小程序就吧这篇文章主要介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料分享给大家,需要的朋友可以参考借鉴,下面来一起看看吧。


前言

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

以上就是让微信小程序的登陆页面有云朵悬浮的动态效果的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号