最新公告
  • 欢迎您光临立业阁,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 登录页云层漂浮的动画效果使用微信小程序实现的图文详解_小程序开发教程


    微信小程序目前的火热程度相信不用多言,最近利用空余时间用小程序实现了个动态的登录页效果,所以下面这篇文章主要给大家介绍了利用微信小程序实现登录页云层漂浮动画效果的相关资料,需要的朋友可以参考借鉴,下面来一起看看吧。

    前言

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

    以上就是登录页云层漂浮的动画效果使用微信小程序实现的图文详解的详细内容,更多请关注liyege.cn其它相关文章!

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    • 1145会员总数(位)
    • 111856资源总数(个)
    • 6本周发布(个)
    • 0 今日发布(个)
    • 239稳定运行(天)

    提供最优质的资源集合

    立即查看 了解详情
    冀ICP备19022365号-1 百度地图

    侵权联系邮箱[email protected]

    立业阁(www.liyege.cn)免费提供wordpress主题模板、dedecms模板、帝国cms模板、小说网站源码、电影网站源码以及网络技术分享,建站源码,小说模板,电影模板,网赚教程,VPS推荐