基礎(chǔ)準(zhǔn)備

對于這個(gè)實(shí)現(xiàn)，我們需要一個(gè)簡單的 div ，并且樣式類名為 ball ：

HTML 代碼:

<div class="ball"></div>

我們將使用 Flexbox 布局，把球放到頁面中間，尺寸為 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)鍵幀) 的樣式非常簡單。我們使用關(guān)鍵字 @keyframes ，在后面跟動(dòng)畫名稱：

CSS 代碼:

@keyframes nameOfAnimation {
/* 代碼 */
}

在這個(gè)示例中，我們把 keyframe(關(guān)鍵幀) 取名為 bounce。在 Keyframe 中，用 from 和 to 關(guān)鍵字來指定動(dòng)畫開始點(diǎn)和結(jié)尾點(diǎn)的 CSS 樣式。

CSS 代碼:

@keyframes bounce {
from { /* 開始 */ }
to   { /* 結(jié)束   */ }
}

很簡單是不是？ 最后一步，我們可以添加我們的開始點(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)行起來了！回到 .ball{} css 并添加以下行代碼：

CSS 代碼:

.ball {
/* ... */
animation: bounce 0.5s;
animation-direction: alternate;
animation-iteration-count: infinite;
}

解釋一下這三行代碼:

告訴 ball 元素使用我們的 keyframe(關(guān)鍵幀) 規(guī)則反彈。 設(shè)置完成動(dòng)畫的時(shí)間長度為 .5 秒。

完成后，動(dòng)畫反方向執(zhí)行（反轉(zhuǎn)）。

無限次地運(yùn)行動(dòng)畫。

真棒，到目前為止。 離我們想要的已經(jīng)很近了，但還不完美：

它看起來不像一個(gè)彈跳的球。那是因?yàn)槲覀儧]有為動(dòng)畫設(shè)置速度曲線，默認(rèn)會(huì)被設(shè)置為 ease。意思是動(dòng)畫的速度剛開始慢，中間變快，快結(jié)束的時(shí)候又變慢。不幸的是，這不是一個(gè)彈跳球的理想選擇。幸運(yùn)的是，我們可以使用 Math 來定制這個(gè) 速度曲線！

進(jìn)入太多的細(xì)節(jié)，你可以使用 bezier(貝塞爾曲線) 來指定自定義動(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)建的最簡單的動(dòng)畫效果.

總結(jié)

以上所述是小編給大家介紹的CSS3 創(chuàng)建網(wǎng)頁動(dòng)畫實(shí)現(xiàn)彈跳球動(dòng)效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論