您好,登錄后才能下訂單哦!
小編給大家分享一下怎么實(shí)現(xiàn)微信小程序的登錄頁面有云朵懸浮的動態(tài)效果,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
小程序?qū)崿F(xiàn)登錄頁云層漂浮動畫效果的方法: 上效果圖(GIF動態(tài)圖) 當(dāng)我看到這張背景圖的時(shí)候,強(qiáng)迫癥立馬來了,這云朵為什么不動,于是開始了一波折騰。 知識點(diǎn)認(rèn)識animationanimation 屬性是一個(gè)簡寫屬性,用于設(shè)置六個(gè)動畫屬性: 值描述animation-name規(guī)定需要綁定到選擇器的 keyframe 名稱animation-duration規(guī)定完成動畫所花費(fèi)的時(shí)間,以秒或毫秒計(jì)animation-timing-function規(guī)定動畫的速度曲線animation-delay規(guī)定在動畫開始之前的延遲animation-iteration-count規(guī)定動畫應(yīng)該播放的次數(shù)animation-direction規(guī)定是否應(yīng)該輪流反向播放動畫認(rèn)識translate方法特別多,本文主要用2個(gè)。 translate3d(1,1,0) 實(shí)現(xiàn)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里可以看到只改變了左右方向。 代碼如下: @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還支持百分比,不錯(cuò)。這里,只要控制好層級關(guān)系、動畫時(shí)長、透明度即可實(shí)現(xiàn)云層漂浮。 總結(jié)不得不說css還是有很多動畫的,也有很多特效,微信小程序里加一點(diǎn)動畫,能使頁面稍微美觀點(diǎn)。當(dāng)然,復(fù)雜點(diǎn)的動畫,只能有機(jī)會再更新。 |
以上是“怎么實(shí)現(xiàn)微信小程序的登錄頁面有云朵懸浮的動態(tài)效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對大家有所幫助,如果還想學(xué)習(xí)更多知識,歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。