微信小程序实现登录页云层漂浮的动画效果
2017-05-05 11:25
1396 查看
前言
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还是有很多动画的,也有很多特效,微信小程序里加一点动画,能使页面稍微美观点。当然,复杂点的动画,只能有机会再更新。
好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对脚本之家的支持。
您可能感兴趣的文章:
相关文章推荐
- 微信小程序登录页动画-云层漂浮
- 微信小程序中使用wxss加载图片并实现动画效果
- 微信小程序实现登录遮罩效果
- 微信小程序开发之animation循环动画实现的让云朵飘效果
- 微信小程序实现循环动画效果
- 微信小程序开发常用技巧(7)——实现一个类似于Android toast效果动画
- (四)微信小程序之实现轮番效果(swiper)
- 微信小程序实例:实现tabs选项卡效果
- android ViewSwitcher实现程序列表分屏和动画效果(仿Launcher)
- Xamarin仿微信Activity动画切换效果实现
- 微信小程序实战(一)---实现登录界面
- 微信小程序例子——使用progress组件实现读取进度效果
- 微信小程序实战(一)---实现登录界面
- Android程序启动时的进入动画效果实现(方式之一)
- 微信小程序 实现tabs选项卡效果实例代码
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- 微信小程序源码大集004---小程序实现大转盘 仿天猫抽奖 跑马灯效果(有图有源码)
- JS实现点击登录弹出窗口同时背景色渐变动画效果
- 高仿微信菜单,主布局层次架构,以及实现菜单,动画效果