| 注册
请输入搜索内容

热门搜索

Java Linux MySQL PHP JavaScript Hibernate jQuery Nginx
infolee
7年前发布

微信小程序登录页动画 - 云层漂浮

   <h2>前言</h2>    <p>2017年前端火了,微信小程序、weex、reactnative,就连支付宝也搞起了小程序,总感觉这是原生要毁灭的节奏啊,我也乘热上车万一波。</p>    <h2>上效果图(GI动态图)</h2>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/f7a1225fb7de853baa6856ca493c1a0f.gif"></p>    <p style="text-align: center;">微信小程序动画</p>    <p>当我看到这张背景图的时候,强迫症立马来了,这云朵为什么不动,于是开始了一波折腾。</p>    <h2>知识点</h2>    <h2>认识animation</h2>    <p>animation 属性是一个简写属性,用于设置六个动画属性:</p>    <p>值 描述</p>    <p>animation-name 规定需要绑定到选择器的 keyframe 名称。。</p>    <p>animation-duration 规定完成动画所花费的时间,以秒或毫秒计。</p>    <p>animation-timing-function 规定动画的速度曲线。</p>    <p>animation-delay 规定在动画开始之前的延迟。</p>    <p>animation-iteration-count 规定动画应该播放的次数。</p>    <p>animation-direction 规定是否应该轮流反向播放动画。</p>    <h2>认识translate</h2>    <p>方法特别多,本文主要用2个。</p>    <ul>     <li>translate3d(x,y,z)定义 3D 缩放转换。</li>     <li>rotate3d(x,y,z,angle) 定义 3D 旋转。</li>    </ul>    <p>translate3d(1,1,0)</p>    <p>你可以理解为(左右,上下,大小)变化。</p>    <p>rotate3d(1,1,0,45deg)</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/65cda46c205a7c7a8dd437ebb616b9e9.png"></p>    <p style="text-align: center;">rotate3d</p>    <h2>实现</h2>    <p>1.两朵云除了大小和初始位置不通,其他都相同。</p>    <pre>  .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);    }  }</pre>    <p>其中rpx是微信特有的属性,不受屏幕大小的影响,类似于安卓里的dp单位。keyframes是匀速移动,从css里可以看到只改变了左右方向。</p>    <p>2.头像本来想加个吊篮,像荡秋千一样的荡漾,但是没有成功,只是随便搞了个飘来飘去的动画。</p>    <p style="text-align: center;"><img src="https://simg.open-open.com/show/e39323de76875174a718c132fc78c068.png"></p>    <p>代码如下</p>    <pre>  @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);    }  }</pre>    <p>没想到keyframes不仅有支持from to还支持百分比,不错。这里,只要控制好层级关系、动画时长、透明度即可实现云层漂浮。</p>    <h2>总结</h2>    <p>不得不说css还是有很多动画的,也有很多特效,微信小程序里加一点动画,能使页面稍微美观点。当然,复杂点的动画,只能有机会再更新。</p>    <p> </p>    <p>来自:https://juejin.im/post/590aacbea22b9d0057a41f45</p>    <p> </p>    
 本文由用户 infolee 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。
 转载本站原创文章,请注明出处,并保留原始链接、图片水印。
 本站是一个以用户分享为主的开源技术平台,欢迎各类分享!
 本文地址:https://www.open-open.com/lib/view/open1493887060629.html
小程序开发 JavaScript开发