微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...
微信小程序目前的火热程度相信不用多言,尤其是近期微信团队开发小程序很多之前被诟病的功能:模糊搜索,附近小程序等。最近有网友利用空余时间用小程序实现了个动态的登录页效果,所以下面我们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还是有很多动画的,也有很多特效,微信小程序里加一点动画,能使页面稍微美观点。当然,复杂点的动画,只能有机会再更新。
微信小程序突然多了好多动态_让微信小程序的登陆页面有云朵悬浮的动态效果...相关推荐
- 微信小程序突然多了好多动态_微信重大更新:微信小程序入口又多了1个
夏浪科技获悉微信公众号在沉寂之后再次有所更新,新增功能包括拍一个自己的表情及换行外,微信公众号在呈现方式以及在小程序搜索.微信其他内容生态的联动上有了更多尝试. 9月25日,微信iOS版本更新至6.7 ...
- 无法定位程序输入点adddlldirectory 于动态_小程序能力只能“单身”?“乐高”组合玩法了解一下...
用小程序导航定位时,明明能拖动地图,找到了想去的地方,却无法直接确定位置. 用小程序叫车时,明明看到了司机就离你2公里,却不能直接显示到达时间. 小程序给我们的生活带来了便利,「地图组件」是不可或缺的 ...
- 微信开发修改button里的字体大小_在微信小程序中如何修改文字大小
这篇文章主要介绍了微信小程序实现点击按钮修改文字大小功能,涉及微信小程序事件绑定及setData动态修改Page页面data数据,进而控制页面元素属性动态改变的相关操作技巧,需要的朋友可以参考下 本文 ...
- 小程序按钮调用扫一扫_他在一个小程序“按钮”上动了个手脚,生意大火,赢得美人归!...
在中小企业成长的市场调查中总是有很多故事,今天给分享一个"在一个小按钮上动动手脚,赢得美人归"的小故事. 故事是这样的,这个餐饮店的老板叫大强,做的是肉夹馍生意.那天我看他家生意非 ...
- 应用程序逆向分析 有道词典_逆向工程媒体应用程序(并使其中的所有故事免费)...
应用程序逆向分析 有道词典 上周,我意识到距我在这里的最新帖子已经一年了. 我喜欢写故事,也喜欢阅读别人的故事,但前提是我认为这些故事足够有趣,而老实说这是一个很高的标准. 我最近一直在对Androi ...
- 程序开源与不开源区别_什么是开源程序办公室? 为什么需要一个?
程序开源与不开源区别 开源计划办公室是任何现代公司必不可少的组成部分,其计划要有一个雄心勃勃的计划来影响软件生态系统的各个领域. 如果公司希望增加影响力,澄清其开源消息传递,最大化其项目影响力或提高其 ...
- 微信公众号代运营公司有哪些_广州微信代运营公司有哪些
随着微信的普及,微信用户逐步在壮大,很多商家企业都开通了自己的微信公众号,然而,要运营好微信公众号还是有一定难度的.这个时候,最好找一些微信公众号代运营公司来帮忙做.微信公众号代运营公司有哪些呢?在广 ...
- taro 小程序转h5之后报错_记录微信小程序转Taro中遇到的问题
环境 系统:windows 开发工具:微信开发工具RC V1.02.1907301 + vscode 微信基础库版本:2.8.1 Taro:v1.3.15 npm: 6.4.1 node: v8.12 ...
- 微信小程序推送消息java开发_干货 | 微信小程序推送消息简单Demo
在开始前,你需要准备:注册微信小程序 一个简单的springBoot 项目 微信开发者工具 正式 微信小程序发送消息主要通过WxMaTemplateMessage 类来推送 public class ...
最新文章
- 零基础学java培训怎么选择学校
- 在word、excel中如果运用VBA进行编程?
- 资产管理大佬讲述:如何用大数据及人工智能挑选基金?
- 【Network Security!】虚拟化架构与系统部署
- ms speech sdk51 TTS使用
- 【BZOJ1623】 [Usaco2008 Open]Cow Cars 奶牛飞车 贪心
- scala hashmap_如何在Scala中将Hashmap转换为Map?
- 简单循迹小车实验心得_智能循迹小车总结 智能循迹小车报告.doc
- 领导想提拔别人,让我让位置,我该怎么办?
- 【QA】揭开知识库问答KB-QA的面纱1·简介篇
- 计算机应用基础专科在线考试,电子科技大学在线考试2019年春计算机应用基础专科(18页)-原创力文档...
- 【22年新版】软件工程专业的各阶段的学习方法
- 传感器技术-光电式传感器(学习笔记十)
- Nginx二级域名代理二级目录
- unity跳跃按钮_Unity——#04 跳跃
- MySQL的基本操作(五)
- linux查看当前网卡网速,Linux环境编程:获取网卡的实时网速
- 消防管道标志色号_消防标志的起步问题
- DirectX12 - Triangle Culling and Winding Order(三角形的剔除与绕序)
- STM32之时钟输出功能
热门文章
- 安装EDEM出现There is a problem with this Windows Installer package问题
- 软件和硬件的质量曲线
- CANN训练营第三季_昇腾CANN算子精讲课_TBE算子Sinh开发笔记_算子开发(二)
- 洛谷P1498 南蛮图腾(递归,找规律)
- MOPSO算法总结,包括OMOPSO,SMPSO,dMOPSO,CMPSO,DDMOPSO,MMOPSO等
- 台湾安格AG6202与CS5210参数差异与区别|HDMI转VGA方案比较|AG6202与CS5210电路设计差异
- 《c语言程序设计》实验报告,C语言程序设计实验实验报告_wenkub
- 比例运算电路小结(电路组态 输入电阻)
- 在vue中使用Google Recaptcha验证
- 判断南红价值,“红“的等级是关键