摘要:上有個(gè)小小的動(dòng)畫,很有趣,效果是這樣的當(dāng)你把鼠標(biāo)移動(dòng)到一個(gè)橫著的手機(jī)圖案上時(shí),這個(gè)手機(jī)圖案就會(huì)立起來(lái),動(dòng)畫很呆萌。
bilibili上有個(gè)小小的動(dòng)畫,很有趣,效果是這樣的:當(dāng)你把鼠標(biāo)移動(dòng)到一個(gè)橫著的手機(jī)圖案上時(shí),這個(gè)手機(jī)圖案就會(huì)立起來(lái),動(dòng)畫很呆萌。我對(duì)它的實(shí)現(xiàn)比較好奇,于是看了一下網(wǎng)頁(yè)代碼,發(fā)現(xiàn)實(shí)現(xiàn)起來(lái)挺簡(jiǎn)單的;原來(lái)這個(gè)地方使用了一條很長(zhǎng)的圖作為背景圖,原理就是通過(guò)多次修改這個(gè)圖案的style.backgroundPositionX屬性,讓這個(gè)圖『動(dòng)起來(lái)』。
我稍微的實(shí)現(xiàn)了一下,雖然不夠精細(xì),但是能看個(gè)效果
動(dòng)畫實(shí)現(xiàn)的一種方式
所有的代碼都在文章中寫出來(lái)了,github的地址點(diǎn)此。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/88030.html
摘要:本文主要介紹中的函數(shù)。在執(zhí)行動(dòng)畫時(shí)默認(rèn)以函數(shù)進(jìn)行過(guò)渡,會(huì)在每個(gè)關(guān)鍵幀之間插入補(bǔ)間動(dòng)畫,所以動(dòng)畫效果是連貫的。因此并非作用于整個(gè)動(dòng)畫,而是作用于每?jī)蓚€(gè)關(guān)鍵幀之間,與動(dòng)畫的時(shí)長(zhǎng)播放次數(shù)等都無(wú)關(guān),所以整個(gè)動(dòng)畫的執(zhí)行時(shí)間還是中設(shè)定的。 利用 CSS3 的 Animation 可以創(chuàng)建動(dòng)畫,在許多頁(yè)面中能夠替代 Flash、JS 等,提升頁(yè)面加載速度。眾所周知,Animation 有 8 大屬性...
摘要:什么是是一個(gè)可以通過(guò)插件來(lái)解析動(dòng)畫,并生成格式的文件。對(duì)于復(fù)雜的動(dòng)畫,開發(fā)同學(xué)要用很長(zhǎng)的時(shí)間來(lái)實(shí)現(xiàn),并且還有可能無(wú)法達(dá)到設(shè)計(jì)同學(xué)的最初的效果。是一個(gè)基于的動(dòng)畫效果實(shí)現(xiàn)組件。它基于開源項(xiàng)目,可以將導(dǎo)出的文件渲染成動(dòng)畫效果。 什么是Lottie Lottie是一個(gè)可以通過(guò)bodymovin插件來(lái)解析Adobe After Effects動(dòng)畫,并生成json格式的文件。該json文件可以通過(guò)...
閱讀 1951·2021-09-07 10:24
閱讀 2087·2019-08-30 15:55
閱讀 2038·2019-08-30 15:43
閱讀 671·2019-08-29 15:25
閱讀 1046·2019-08-29 12:19
閱讀 1927·2019-08-23 18:32
閱讀 1515·2019-08-23 17:59
閱讀 947·2019-08-23 12:22