微信小程序实现登录页云层漂浮的动画效果


Posted in Javascript onMay 05, 2017

前言

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

好了,以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
javascript利用apply和arguments复用方法
Nov 25 Javascript
关于onchange事件在IE和FF下的表现及解决方法
Mar 08 Javascript
jquery动态改变form属性提交表单
Jun 03 Javascript
微信小程序 页面跳转传参详解
Oct 28 Javascript
vue组件如何被其他项目引用
Apr 13 Javascript
vue快捷键与基础指令详解
Jun 01 Javascript
深入浅析Node.js单线程模型
Jul 10 Javascript
Javascript中的getter和setter初识
Aug 17 Javascript
Bootstrap popover 实现鼠标移入移除显示隐藏功能方法
Jan 24 Javascript
vue中的ref和$refs的使用
Nov 22 Javascript
了解javascript中的Dom操作
May 27 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
xmlplus组件设计系列之图标(ICON)(1)
May 05 #Javascript
xmlplus组件设计系列之网格(DataGrid)(10)
May 05 #Javascript
移动端web滚动分页的实现方法
May 05 #Javascript
vue.js之vue-cli脚手架的搭建详解
May 05 #Javascript
Vue中使用vux的配置详解
May 05 #Javascript
Angular directive递归实现目录树结构代码实例
May 05 #Javascript
微信小程序开发图片拖拽实例详解
May 05 #Javascript
You might like
MySql 按时间段查询数据方法(实例说明)
2008/11/02 PHP
一个很不错的PHP翻页类
2009/06/01 PHP
php流量统计功能的实现代码
2012/09/29 PHP
PHP file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
浅谈Laravel POST,PUT,PATCH 路由的区别
2019/10/15 PHP
javascript的函数
2007/01/31 Javascript
js RuntimeObject() 获取ie里面自定义函数或者属性的集合
2010/11/23 Javascript
使用jQuery将多条数据插入模态框的实现代码
2014/10/08 Javascript
js判断手机浏览器操作系统和微信浏览器的方法
2016/04/30 Javascript
jQuery validate验证插件使用详解
2016/05/11 Javascript
js插件dropload上拉下滑加载数据实例解析
2016/07/27 Javascript
原生javascript实现分页效果
2017/04/21 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
详解VUE2.X过滤器的使用方法
2018/01/11 Javascript
Vue传参一箩筐(页面、组件)
2019/04/04 Javascript
Angular8引入百度Echarts进行图表分析的实现代码
2019/11/27 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
[02:18]《我与DAC》之工作人员:为了热爱DOTA2的玩家们
2018/03/28 DOTA
Python获取DLL和EXE文件版本号的方法
2015/03/10 Python
Linux RedHat下安装Python2.7开发环境
2017/05/20 Python
Python编程对列表中字典元素进行排序的方法详解
2017/05/26 Python
Python魔法方法功能与用法简介
2019/04/04 Python
python中的句柄操作的方法示例
2019/06/20 Python
Python 给定的经纬度标注在地图上的实现方法
2019/07/05 Python
python查找特定名称文件并按序号、文件名分行打印输出的方法
2020/04/24 Python
Python新手学习raise用法
2020/06/03 Python
Python-openCV开运算实例
2020/07/05 Python
英国票务网站:Ticketmaster英国
2018/08/27 全球购物
英国森林假期:Forest Holidays
2021/01/01 全球购物
在校生钳工实习自我鉴定
2013/09/19 职场文书
高中毕业自我鉴定
2013/12/13 职场文书
《小白兔和小灰兔》教学反思
2014/02/18 职场文书
公司运动会策划方案
2014/05/25 职场文书
党小组鉴定意见
2015/06/02 职场文书
什么是求职信?求职信应包含哪些内容?
2019/08/14 职场文书