您好,登錄后才能下訂單哦!
這篇文章將為大家詳細(xì)講解有關(guān)css實(shí)現(xiàn)彈跳球動(dòng)畫(huà)效果的方法,小編覺(jué)得挺實(shí)用的,因此分享給大家做個(gè)參考,希望大家閱讀完這篇文章后可以有所收獲。
1、定義動(dòng)畫(huà)關(guān)鍵幀
對(duì)于這個(gè)動(dòng)畫(huà),我們將使用兩個(gè)關(guān)鍵幀 - 一個(gè)用恒定速度水平平移球,另一個(gè)用于應(yīng)用大致拋物線垂直彈跳運(yùn)動(dòng)??梢詫⑺胶痛怪逼揭平M合成一個(gè)關(guān)鍵幀,但這對(duì)我們所追求的效果不起作用。
使用以下關(guān)鍵幀可以輕松實(shí)現(xiàn)水平運(yùn)動(dòng):
@-webkit-keyframes travel { from { } to { left: 640px; } } @keyframes travel { from { } to { left: 640px; } }
稍后將使用指定的名稱(chēng)“travel”引用此關(guān)鍵幀,并使用linear(轉(zhuǎn)換計(jì)時(shí)函數(shù))來(lái)應(yīng)用該關(guān)鍵幀,該函數(shù)隨每次迭代更改方向。
對(duì)于垂直彈跳,動(dòng)畫(huà),我們要利用的易用性在和漸出定時(shí)功能來(lái)模擬重力場(chǎng)的影響:
@-webkit-keyframes bounce { from, to { bottom: 0; -webkit-animation-timing-function: ease-out; } 50% { bottom: 220px; -webkit-animation-timing-function: ease-in; } } @keyframes bounce { from, to { botttom: 0; animation-timing-function: ease-out; } 50% { bottom: 220px; animation-timing-function: ease-in; } }
該關(guān)鍵幀已被命名為“bounce”以供將來(lái)參考。
組合這兩個(gè)關(guān)鍵幀將使我們的'球'水平移動(dòng)640像素,垂直移動(dòng)220像素。當(dāng)然,這些值需要調(diào)整以適應(yīng)“舞臺(tái)”的大小。
2、設(shè)置動(dòng)畫(huà)的舞臺(tái)
與往常一樣,我們首先設(shè)置一個(gè)“舞臺(tái)”,在其中執(zhí)行動(dòng)畫(huà)。在這種情況下,一個(gè)尺寸為660 x 240像素的簡(jiǎn)單DIV。讓寬度為100%會(huì)很好,但是在不知道確切像素寬度的情況下放置一些元素是很困難的。
#stage { position: relative; margin: 1em auto; width: 660px; height: 240px; border: 2px solid #666; background: #cff; }
在這個(gè)階段,我們將設(shè)置一個(gè)水平來(lái)回移動(dòng)的DIV元素,并在其中表示上下反彈的“球”的DIV:
#traveler { position: absolute; width: 20px; height: 240px; -webkit-animation-name: travel; -webkit-animation-timing-function: linear; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; -webkit-animation-duration: 4.8s; animation-name: travel; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; animation-duration: 4.8s; } #bouncer { position: absolute; width: 20px; height: 20px; background: red; border-radius: 10px; -webkit-animation-name: bounce; -webkit-animation-iteration-count: infinite; -webkit-animation-duration: 4.2s; animation-name: bounce; animation-iteration-count: infinite; animation-duration: 4.2s; }
所以'球'的尺寸為20 x 20像素,圓角。
3、設(shè)置球運(yùn)動(dòng)
我們完成了一些簡(jiǎn)單的HTML標(biāo)記:
<div id="stage"> <div id="traveler"> <div id="bouncer"><!-- --></div> </div> </div>
如果您的瀏覽器支持它,動(dòng)畫(huà)將自動(dòng)啟動(dòng)并在下面的框(或#stage)中無(wú)限期地繼續(xù):
我們添加了一個(gè)額外的元素和一些樣式來(lái)突出動(dòng)畫(huà)的x和y分量,不需要JavaScript,其他代碼完全如所示。
關(guān)于css實(shí)現(xiàn)彈跳球動(dòng)畫(huà)效果的方法就分享到這里了,希望以上內(nèi)容可以對(duì)大家有一定的幫助,可以學(xué)到更多知識(shí)。如果覺(jué)得文章不錯(cuò),可以把它分享出去讓更多的人看到。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。