微信小程序登录页动画-云层漂浮
前言
2017年前端火了,微信小程序、weex、reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波。
上效果图(GI动态图)
当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾。
知识点
认识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还是有很多动画的,也有很多特效,微信小程序里加一点动画,能使页面稍微美观点。当然,复杂点的动画,只能有机会再更新。
csdn博客:
http://blog.csdn.net/qq273681448/
简书:
http://www.jianshu.com/users/ef6207f116a2/timeline
掘金:
https://juejin.im/user/57cd55218ac247006459c40c
Github:
https://github.com/qq273681448
微信小程序登录页动画-云层漂浮相关推荐
- 微信小程序没登录跳到登录页怎么做_微信小程序登录页动画怎么做
2017年5月22日,微信小程序推出之时,限制非常多,现在越来越开放.微信小程序动画怎么做也受到越来越多人的关注,下面从多个方面来谈谈微信小程序怎么做的一些内容. 前言 2017年前端火了,微信小程序 ...
- 微信小程序登录页验证与页面跳转
微信小程序登录页实现验证登录和页面跳转 利用js实现验证登录和页面跳转,开发工具是微信开发者工具. wxml部分 登录页面的代码,需要再创建一个主页. <view class="wel ...
- css卷轴动画小程序,微信小程序登录页:CSS实现动画云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 微信小程序动画 当我看到这 ...
- mySQL微信小程序的div_微信小程序登录页:CSS实现动画云层漂浮
前言 2017年前端火了,微信小程序.weex.reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波. 上效果图(GI动态图) 微信小程序动画 当我看到这 ...
- 微信小程序登录页php后台,微信小程序:微信登陆(ThinkPHP作后台)
QQ截图20170320170136.png 微信小程序官方给了十分详细的登陆时序图,当然为了安全着想,应该加上签名加密. 微信小程序端 login: function(e) { var that = ...
- 微信小程序登录页php后台,微信小程序php后台登录
public function wxlogin1(){ $get = input('post.'); $param['appid'] = 'wxbaa36a7944e7a062'; //小程序id $ ...
- uniapp 微信小程序登录方法封装
uniapp 微信小程序登录方法封装 前言 一.登录接口 二.登录 上代码 总结 前言 ui设计没有登录页所以将微信小程序登录方法同一封装一个方法 一.登录接口 uni.getUserProfile ...
- 小程序---365笔记第11天---微信小程序登录接入
接入前的准备工作参考文档:微信小程序登录接入 (必做) 登录逻辑:小程序登录逻辑梳理 使用插件参考文档:https://developers.weixin.qq.com/miniprogram/dev ...
- Python Flask微信小程序登录流程及登录api实现代码
1.小程序端调用wx.login 2.判断用户是否授权 3.小程序端访问 wx.getUserInfo 4.小程序端js代码:+ wx.login({success: resp => {// 发 ...
最新文章
- Laravel/Lumen 使用 Redis队列
- Websocket总结
- Sierpinski镂垫
- 老司机的应用级监控——spring?actuator
- java JFrame 设置背景颜色无效的理解
- MFC-使用自定义控件的方法
- OWASPTop10安全风险与防护
- php larvel https,Laravel 5-重定向到HTTPS
- ip地址、域名、DNS、URL(即网址)的区别与联系
- TCP 协议(包含三次握手,四次挥手)
- 计算机开机硬盘扫描,解决每次开机都检测硬盘
- C4D实现宜家闹钟建模
- 【原创】Magisk+Shamiko过APP ROOT检测
- 程序员修炼之道——通向务实的最高境界(第二版)
- 查看文件夹和文件大小
- 『UE4数字孪生』开发流程浅析2022版(持续更新)
- 用Python做的小游戏合集来咯~自行开发一个星际争霸小游戏~
- plsql实现1..100累加、奇数之和、偶数之和
- 远控免杀专题(16)-Unicorn免杀(VT免杀率29/56)
- AcWing 844. 走迷宫(迷宫问题+最短路径+BFS+最短路径输出)