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


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+iframe 实现无刷新载入整页的代码
Mar 17 Javascript
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
跟我学Node.js(四)---Node.js的模块载入方式与机制
Jun 04 Javascript
Javascript中的几种URL编码方法比较
Jan 23 Javascript
jQuery 回调函数(callback)的使用和基础
Feb 26 Javascript
AngularJS手动表单验证
Feb 01 Javascript
JavaScript中Array对象用法实例总结
Nov 29 Javascript
Vuejs 用$emit与$on来进行兄弟组件之间的数据传输通信
Feb 23 Javascript
Javascript创建类和对象详解
May 31 Javascript
微信小程序系列之自定义顶部导航功能
May 21 Javascript
原生js实现html手机端城市列表索引选择城市
Jun 24 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
PHP 字符串正则替换函数preg_replace使用说明
2011/07/15 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
php版微信支付api.mch.weixin.qq.com域名解析慢原因与解决方法
2016/10/12 PHP
利用Homestead快速运行一个Laravel项目的方法详解
2017/11/14 PHP
在PHP中实现使用Guzzle执行POST和GET请求
2019/10/15 PHP
jquery动态添加删除div 具体实现
2013/07/20 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
整理Javascript流程控制语句学习笔记
2015/11/29 Javascript
Bootstrap编写一个同时适用于PC、平板、手机的登陆页面
2016/06/30 Javascript
老生常谈原生JS执行环境与作用域
2016/11/22 Javascript
vue.js加载新的内容(实例代码)
2017/06/01 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
Node.js事件的正确使用方法
2019/04/05 Javascript
微信小程序new Date()方法失效问题解决方法
2019/07/29 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
2020/04/22 Javascript
Python 的 with 语句详解
2014/06/13 Python
Python3.4编程实现简单抓取爬虫功能示例
2017/09/14 Python
python利用小波分析进行特征提取的实例
2019/01/09 Python
详解python 爬取12306验证码
2019/05/10 Python
Python 使用 Pillow 模块给图片添加文字水印的方法
2019/08/30 Python
python 用户交互输入input的4种用法详解
2019/09/24 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
Python3监控windows,linux系统的CPU、硬盘、内存使用率和各个端口的开启情况详细代码实例
2020/03/18 Python
利用Python如何实时检测自身内存占用
2020/05/09 Python
浅谈pytorch中的BN层的注意事项
2020/06/23 Python
Python实现FTP文件定时自动下载的步骤
2020/12/19 Python
css sprite简单实例
2016/05/23 HTML / CSS
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
西安启天科技有限公司网络工程师面试题笔试题
2016/06/12 面试题
总经理岗位职责
2013/11/09 职场文书
经销商订货会主持词
2014/03/27 职场文书
经典禁毒标语
2014/06/16 职场文书
小学生推普周国旗下讲话稿
2014/09/21 职场文书
2014年保管员工作总结
2014/11/18 职场文书
2016年3月份红领巾广播稿
2015/12/21 职场文书
社区结对共建协议书
2016/03/23 职场文书