如何用html把图片做成动画的软件,如何用HTML做动画？

应用软件：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编辑页面。

代码如下：

#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

}

}

大概9个步骤吧，有先后顺序。如果要看编辑结果要按ctrl+r，如果要修改按F5刷新看最新的修改结果。