5分鐘教你利用css3動畫實現奔跑的北極熊效果

2021-10-05 07:12:41 字數 566 閱讀 2515

實現原理:利用css3動畫中的animation-timing-function的steps(),讓一張有連續動作一段一段的在頁面上顯示出來,從而實現動畫效果。

div盒子的作用:用於顯示素材中的乙隻北極熊。因為我們的素材是1600x100,有8只北極熊,所以我們div盒子的寬高就是200x100,這樣我們就把我們的素材分成8份了

class

="box"

>

div>

body

.box

這樣我們的頁面就有個小熊了:

}在.box中呼叫bear這個動畫

.box

"box">

css3的動畫實現

關鍵幀 keyframes 動畫名稱 20 40 60 80 100 animation name 定義乙個或者多個動畫的名稱 eg demo animation duration 動畫執行的時間 取值 0時,動畫不執行 time 正數 單位為s或者ms animation delay 動畫執行的延...

css3實現動畫效果

transition property 指定對 html 元素的哪個 css 屬性進行平滑漸變處理。該屬性 可以指定 background color width height 等各種標準的 css 屬性。all代表所有屬性 transition duration 指定屬性平滑漸變的持續時間。tra...

css3的動畫實現

關鍵幀 keyframes 動畫名稱20 40 60 80 100 1 animation name 定義乙個或者多個動畫的名稱 eg demo 2 animation duration 動畫執行的時間 取值 0時,動畫不執行 time 正數 單位為s或者ms animation delay 動畫執...