应用软件：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选择器，根据id找到并且添加样式 第三步 */
background: url(img/jump.png);/*背景里添加要编辑的图片 第四步*/
/*width:表示宽度属性*/
width: 200px;/*显示图片宽度为200像素的范围 第五步*/
/*height:表示高度属性*/
height: 300px;/*显示图片高度为300像素的范围 第六步*/
/*animation:表示动画属性 infinite:代表无限循环 step-start:代表贝塞尔曲线*/
animation: jump 1s infinite step-start;/*1，动画名称 2，动画持续时间 3，动画播放次数 4，按照什么样曲线运动 第九部*/
}
/*keyframes:表示关键帧*/
@keyframes jump{/*创建一个名字为jump的动画 第七步*/
0%{/*帧数 第八步*/
/*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 文档中的一个分隔区块或者一个区域部分。第一步-->
</div>
</body>
</html>
大概9个步骤吧，有先后顺序。如果要看编辑结果要按ctrl+r，如果要修改按F5刷新看最新的修改结果。
网友评论