應(yīng)用軟件：HBuilder.8.8.7
應(yīng)用圖片如下：
jump.png
新建一個(gè)web項(xiàng)目。如圖：
2017-12-02_160125.png
給項(xiàng)目起一個(gè)名字。如圖：
2017-12-02_160340.png
再把你要制作的圖片拖拽到img文件夾中。如圖：
2017-12-02_160545.png
點(diǎn)擊進(jìn)入index.html編輯頁(yè)面。
代碼如下：
<!DOCTYPE html> <!--<!DOCTYPE> 聲明不是一個(gè) HTML 標(biāo)簽；它是用來(lái)告知 Web 瀏覽器頁(yè)面使用了哪種 HTML 版本。-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">/*<style> 標(biāo)簽定義 HTML 文檔的樣式信息。 第二步 */
#jump{/*#jump表示選擇器：也叫做id選擇器，根據(jù)id找到并且添加樣式 第三步 */
background: url(img/jump.png);/*背景里添加要編輯的圖片 第四步*/
/*width:表示寬度屬性*/
width: 200px;/*顯示圖片寬度為200像素的范圍 第五步*/
/*height:表示高度屬性*/
height: 300px;/*顯示圖片高度為300像素的范圍 第六步*/
/*animation:表示動(dòng)畫(huà)屬性 infinite:代表無(wú)限循環(huán) step-start:代表貝塞爾曲線(xiàn)*/
animation: jump 1s infinite step-start;/*1，動(dòng)畫(huà)名稱(chēng) 2，動(dòng)畫(huà)持續(xù)時(shí)間 3，動(dòng)畫(huà)播放次數(shù) 4，按照什么樣曲線(xiàn)運(yùn)動(dòng) 第九部*/
}
/*keyframes:表示關(guān)鍵幀*/
@keyframes jump{/*創(chuàng)建一個(gè)名字為jump的動(dòng)畫(huà) 第七步*/
0%{/*幀數(shù) 第八步*/
/*background-position:背景定位屬性*/
background-position: 0px ;/*背景圖片的位移位置*/
}
17%{
background-position: -180px
}
34%{
background-position: -360px
}
51%{
background-position: -540px
}
68%{
background-position: -720px
}
85%{
background-position: -900px
}
100%{
background-position: -1080px
}
}
</style>
<body>
<div id="jump"><!--<div> 標(biāo)簽定義 HTML 文檔中的一個(gè)分隔區(qū)塊或者一個(gè)區(qū)域部分。第一步-->
</div>
</body>
</html>
大概9個(gè)步驟吧，有先后順序。如果要看編輯結(jié)果要按ctrl+r，如果要修改按F5刷新看最新的修改結(jié)果。
