您好,登錄后才能下訂單哦!
基礎(chǔ)準(zhǔn)備
對(duì)于這個(gè)實(shí)現(xiàn),我們需要一個(gè)簡(jiǎn)單的 div
,并且樣式類名為 ball
:
HTML 代碼:
<div class="ball"></div>
我們將使用 Flexbox 布局,把球放到頁(yè)面中間,尺寸為 100px * 100px,背景色為橘色。
CSS 代碼:
body {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%; /* 把正方形變成圓形*/
background-color: #FF5722; /* 設(shè)置顏色為橙色*/
}
創(chuàng)建 Keyframe(關(guān)鍵幀)
Keyframe(關(guān)鍵幀) 用于 CSS 動(dòng)畫,以便我們完全控制動(dòng)畫。創(chuàng)建 Keyframe(關(guān)鍵幀) 的樣式非常簡(jiǎn)單。我們使用關(guān)鍵字 @keyframes
,在后面跟動(dòng)畫名稱:
CSS 代碼:
@keyframes nameOfAnimation {
/* 代碼 */
}
在這個(gè)示例中,我們把 keyframe(關(guān)鍵幀) 取名為 bounce。在 Keyframe 中,用 from 和 to 關(guān)鍵字來(lái)指定動(dòng)畫開(kāi)始點(diǎn)和結(jié)尾點(diǎn)的 CSS 樣式。
CSS 代碼:
@keyframes bounce {
from { /* 開(kāi)始 */ }
to { /* 結(jié)束 */ }
}
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n: 731771211,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻)
很簡(jiǎn)單是不是? 最后一步,我們可以添加我們的開(kāi)始點(diǎn)和結(jié)尾點(diǎn)的 CSS 樣式。為了創(chuàng)建反彈效果,我們將只是改變球的位置。transform 允許我們修改給定元素的坐標(biāo)。以下是最終的 keyframe(關(guān)鍵幀) :
CSS 代碼:
@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0); }
}
我們使用 transform 讓球沿著三維軸平移,translate3D 函數(shù)需要 3 個(gè)輸入?yún)?shù),即 (x, y, z) 。 因?yàn)槲覀兿胱屒蛏舷绿鴦?dòng),我們只需要沿著 y 軸進(jìn)行平移。因此,動(dòng)畫結(jié)束點(diǎn)(即 to 中樣式)的 y 值變成了 200px 。
運(yùn)行 Keyframe(關(guān)鍵幀)
現(xiàn)在 @keyframe
已經(jīng)創(chuàng)建了,是時(shí)候讓它運(yùn)行起來(lái)了!回到 .ball{} css
并添加以下行代碼:
CSS 代碼:
.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}
解釋一下這三行代碼:
告訴 ball 元素使用我們的 keyframe(關(guān)鍵幀) 規(guī)則反彈。 設(shè)置完成動(dòng)畫的時(shí)間長(zhǎng)度為 .5 秒。
完成后,動(dòng)畫反方向執(zhí)行(反轉(zhuǎn))。
無(wú)限次地運(yùn)行動(dòng)畫。
真棒,到目前為止。 離我們想要的已經(jīng)很近了,但還不完美:
它看起來(lái)不像一個(gè)彈跳的球。那是因?yàn)槲覀儧](méi)有為動(dòng)畫設(shè)置速度曲線,默認(rèn)會(huì)被設(shè)置為 ease。意思是動(dòng)畫的速度剛開(kāi)始慢,中間變快,快結(jié)束的時(shí)候又變慢。不幸的是,這不是一個(gè)彈跳球的理想選擇。幸運(yùn)的是,我們可以使用 Math 來(lái)定制這個(gè) 速度曲線!
進(jìn)入太多的細(xì)節(jié),你可以使用 bezier(貝塞爾曲線) 來(lái)指定自定義動(dòng)畫時(shí)間。以下是附加的代碼:
CSS 代碼:
.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}
當(dāng)然這是用 CSS Animations(動(dòng)畫) 和 Keyframes(關(guān)鍵幀) 創(chuàng)建的最簡(jiǎn)單的動(dòng)畫效果.
web前端開(kāi)發(fā)學(xué)習(xí)Q-q-u-n: 731771211,分享學(xué)習(xí)的方法和需要注意的小細(xì)節(jié),不停更新最新的教程和學(xué)習(xí)方法(詳細(xì)的前端項(xiàng)目實(shí)戰(zhàn)教學(xué)視頻)
免責(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)容。