CSS3 創建簡單的網頁動畫 – 實現彈跳球動

clipboard.png

基礎準備
對於這個實現,我們需要一個簡單的 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;  /* 設置顏色爲橙色*/
}

創建 Keyframe(關鍵幀)
Keyframe(關鍵幀) 用於 CSS 動畫,以便我們完全控制動畫。創建 Keyframe(關鍵幀) 的樣式非常簡單。我們使用關鍵字 @keyframes,在後面跟動畫名稱:

CSS 代碼:

@keyframes nameOfAnimation {
/* 代碼 */
}

在這個示例中,我們把 keyframe(關鍵幀) 取名爲 bounce。在 Keyframe 中,用 from 和 to 關鍵字來指定動畫開始點和結尾點的 CSS 樣式。

CSS 代碼:

@keyframes bounce {
from { /* 開始 */ }
to   { /* 結束   */ }
}

很簡單是不是? 最後一步,我們可以添加我們的開始點和結尾點的 CSS 樣式。爲了創建反彈效果,我們將只是改變球的位置。transform 允許我們修改給定元素的座標。以下是最終的 keyframe(關鍵幀) :

CSS 代碼:

@keyframes bounce {
from { transform: translate3d(0, 0, 0);     }
to   { transform: translate3d(0, 200px, 0); }
}

我們使用 transform 讓球沿着三維軸平移,translate3D 函數需要 3 個輸入參數,即 (x, y, z) 。 因爲我們想讓球上下跳動,我們只需要沿着 y 軸進行平移。因此,動畫結束點(即 to 中樣式)的 y 值變成了 200px 。

運行 Keyframe(關鍵幀)

現在 @keyframe 已經創建了,是時候讓它運行起來了!回到 .ball{} css 並添加以下行代碼:

CSS 代碼:

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

解釋一下這三行代碼:

告訴 ball 元素使用我們的 keyframe(關鍵幀) 規則反彈。 設置完成動畫的時間長度爲 .5 秒。
完成後,動畫反方向執行(反轉)。
無限次地運行動畫。

真棒,到目前爲止。 離我們想要的已經很近了,但還不完美:

它看起來不像一個彈跳的球。那是因爲我們沒有爲動畫設置速度曲線,默認會被設置爲 ease。意思是動畫的速度剛開始慢,中間變快,快結束的時候又變慢。不幸的是,這不是一個彈跳球的理想選擇。幸運的是,我們可以使用 Math 來定製這個 速度曲線!

進入太多的細節,你可以使用 bezier(貝塞爾曲線) 來指定自定義動畫時間。以下是附加的代碼:

CSS 代碼:

.ball {
/* ... */
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
}

當然這是用 CSS Animations(動畫) 和 Keyframes(關鍵幀) 創建的最簡單的動畫效果.

這裏推薦一下我的前端學習交流羣:784783012,裏面都是學習前端的,自己整理了一份2018最全面前端學習資料,從最基礎的HTML+CSS+JS【炫酷特效,遊戲,插件封裝,設計模式】到移動端HTML5的項目實戰的學習資料都有整理,送給每一位前端小夥伴

點擊:加入

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章