應用軟件：HBuilder.8.8.7
應用圖片如下：
jump.png
新建一個web項目淀弹。如圖：
2017-12-02_160125.png
給項目起一個名字夫壁。如圖：
2017-12-02_160340.png
再把你要制作的圖片拖拽到img文件夾中拾枣。如圖：
2017-12-02_160545.png
點擊進入index.html編輯頁面。
代碼如下：
<!DOCTYPE html> <!--<!DOCTYPE> 聲明不是一個 HTML 標簽盒让；它是用來告知 Web 瀏覽器頁面使用了哪種 HTML 版本梅肤。-->
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">/*<style> 標簽定義 HTML 文檔的樣式信息。 第二步 */
#jump{/*#jump表示選擇器：也叫做id選擇器邑茄，根據(jù)id找到并且添加樣式 第三步 */
background: url(img/jump.png);/*背景里添加要編輯的圖片 第四步*/
/*width:表示寬度屬性*/
width: 200px;/*顯示圖片寬度為200像素的范圍 第五步*/
/*height:表示高度屬性*/
height: 300px;/*顯示圖片高度為300像素的范圍 第六步*/
/*animation:表示動畫屬性 infinite:代表無限循環(huán) step-start:代表貝塞爾曲線*/
animation: jump 1s infinite step-start;/*1姨蝴，動畫名稱 2，動畫持續(xù)時間 3肺缕，動畫播放次數(shù) 4左医，按照什么樣曲線運動 第九部*/
}
/*keyframes:表示關(guān)鍵幀*/
@keyframes jump{/*創(chuàng)建一個名字為jump的動畫 第七步*/
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> 標簽定義 HTML 文檔中的一個分隔區(qū)塊或者一個區(qū)域部分。第一步-->
</div>
</body>
</html>
大概9個步驟吧同木，有先后順序浮梢。如果要看編輯結(jié)果要按ctrl+r，如果要修改按F5刷新看最新的修改結(jié)果彤路。
