CSS實(shí)現(xiàn)奔跑的北極熊動(dòng)畫

最終效果
實(shí)現(xiàn)思路
上面這個(gè)動(dòng)畫效果細(xì)分有三個(gè)動(dòng)畫,我們來分別說一下他們的實(shí)現(xiàn)效果!
雪山的移動(dòng)
首先,我們需要將一個(gè)盒子采用固定定位定位到頁面底部,然后給這個(gè)盒子添加背景圖片雪山,并且圖片平鋪。準(zhǔn)備好之后就開始寫動(dòng)畫了,我們只需要向左移動(dòng)背景圖片就行,然后動(dòng)畫不斷循環(huán)即可!
動(dòng)畫代碼如下:
/* 定義山向后移動(dòng)動(dòng)畫 */ @keyframes mountain{ 0%{ background-position: 0; } 100%{ background-position: -3840px 0; } }
北極熊的移動(dòng)
這個(gè)動(dòng)畫只需要執(zhí)行一次,將北極熊移動(dòng)到屏幕中央,之前關(guān)于將盒子移動(dòng)到屏幕中間我們已經(jīng)寫過一些方法了,直接看代碼:
/* 定義小熊奔跑到屏幕中央動(dòng)畫 */ @keyframes move{ 0%{ left: 0; } 100%{ left: 50%; transform: translateX(-50%); } }
北極熊的奔跑
這個(gè)動(dòng)畫是本次動(dòng)畫的重點(diǎn),其實(shí)也比較簡(jiǎn)單,我們只需要準(zhǔn)備一張北極熊奔跑的系列圖片。
這張圖片總長(zhǎng)為1600px,我們只需要準(zhǔn)備一個(gè)200px的盒子,讓這張圖片作為盒子的背景圖片,然后向后移動(dòng)圖片位置即可實(shí)現(xiàn)北極熊的奔跑。然后動(dòng)畫的速度曲線我們用steps(8)步長(zhǎng),200px*8正好1600px,然后讓動(dòng)畫無限循環(huán)。
動(dòng)畫代碼如下:
/* 定義小熊奔跑動(dòng)畫 */ @keyframes run{ 0%{ background-position: 0; } 100%{ background-position: -1600px 0; } }
源代碼
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>奔跑的小熊</title> <style> html,body{ height: 99%; background-color: #3b3d4b; } .box{ position: fixed; bottom: 0; width: 100%; height:336px; overflow: hidden; background: url(img/20210503122606771.png) repeat; animation: mountain 20s linear infinite; } .bear{ position: absolute; width:200px; height: 100px; left: 0; bottom: 0; background: url(img/20210503123039702.png) no-repeat; animation: run 1s steps(8) infinite,move 3s linear 1 forwards; } /* 定義小熊奔跑動(dòng)畫 */ @keyframes run{ 0%{ background-position: 0; } 100%{ background-position: -1600px 0; } } /* 定義小熊奔跑到屏幕中央動(dòng)畫 */ @keyframes move{ 0%{ left: 0; } 100%{ left: 50%; transform: translateX(-50%); } } /* 定義山向后移動(dòng)動(dòng)畫 */ @keyframes mountain{ 0%{ background-position: 0; } 100%{ background-position: -3840px 0; } } </style> </head> <body> <div class="box"> <div class="bear"></div> </div> </body> </html>
到此這篇關(guān)于CSS實(shí)現(xiàn)奔跑的北極熊動(dòng)畫的文章就介紹到這了,更多相關(guān)CSS北極熊動(dòng)畫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持腳本之家!
相關(guān)文章
css3鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框
現(xiàn)如今網(wǎng)頁越來越趨近于動(dòng)畫,相信大家平時(shí)瀏覽網(wǎng)頁或多或少都能看到一些動(dòng)畫效果,今天我們做一個(gè)通過 css3 鼠標(biāo)滑過實(shí)現(xiàn)動(dòng)畫線條邊框,下面一起看看吧2023-02-22CSS3 Tab動(dòng)畫實(shí)例之背景切換動(dòng)態(tài)效果
這篇文章主要介紹了CSS3 Tab動(dòng)畫實(shí)例之背景切換動(dòng)態(tài)效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-08-20CSS3常見動(dòng)畫的實(shí)現(xiàn)方式
這篇文章主要介紹了CSS3常見動(dòng)畫的實(shí)現(xiàn)方式,幫助大家更好的理解和學(xué)習(xí)使用CSS3制作特效,感興趣的朋友可以了解下2021-04-14- 這篇文章主要介紹了css3實(shí)現(xiàn)的加載動(dòng)畫效果,幫助大家更好的利用css3制作網(wǎng)頁,感興趣的朋友可以了解下2021-04-07
css3實(shí)現(xiàn)的天氣圖標(biāo)動(dòng)畫效果
這篇文章主要介紹了css3實(shí)現(xiàn)的天氣圖標(biāo)動(dòng)畫效果,幫助大家更好的利用css3制作網(wǎng)頁,感興趣的朋友可以了解下2021-04-06CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效
這篇文章主要介紹了CSS3通過var()和calc()函數(shù)實(shí)現(xiàn)動(dòng)畫特效,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-29CSS3過渡旋轉(zhuǎn)透視2d3d動(dòng)畫等效果的實(shí)例代碼
這篇文章主要介紹了CSS3過渡旋轉(zhuǎn)透視2d3d動(dòng)畫等效果的實(shí)例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-03-18純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫的示例代碼
這篇文章主要介紹了純CSS3實(shí)現(xiàn)圓圈動(dòng)態(tài)發(fā)光特效動(dòng)畫的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編2021-03-08css3動(dòng)畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小效果
這篇文章主要介紹了css3動(dòng)畫鼠標(biāo)放上圖片逐漸變大鼠標(biāo)離開圖片逐漸縮小,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2021-01-27CSS3.0實(shí)現(xiàn)霓虹燈按鈕動(dòng)畫特效的示例代碼
這篇文章主要介紹了CSS3.0實(shí)現(xiàn)霓虹燈按鈕動(dòng)畫特效的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來2021-01-12