版权声明：----------阿宁i https://blog.csdn.net/ningwb______/article/details/88769849
本文问web前端基础知识点，重点是动画模块代码，感谢潭州课堂免费公开课。
使用语言：html、css
使用软件：editplus3 ,(txt文本也可以，改后缀 txt 为 html)
素材提取：（包含：效果展示文件、素材图：师徒四人、背景图）
链接：https://pan.baidu.com/s/1Mvna6fZ9rkQ4ybpzwKD3jA 提取码：ttja
效果图：（其实是动画页面，此处为静态截图）
代码：
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>西天取经</title>
<style>
body{
margin: 0; /* 去除外边距 */
background-image:url('images/bac.webp');
background-position:1px 0;
/* 动画： 动画名称 秒数 步 循环播放 - 适用于bgi */
animation:bg 100s steps(1920) infinite ;/* 动画 动画名称 */
}
.list{
position:relative; /* 相对定位 */
width:100%; /* 当前标签的宽度，随浏览器宽度而改变 */
height:200px; /* 当前标签的高度 200像素 */
/*background:red;*/ /* 测试代码，用于凸显当前元素所占空间，完工后注掉 */
top:400px; /* 当前标签相对父标签上方的距离：400px */
}
.list div{
width:180px;
height:180px;
/* background-color:skyblue; */ /* 测试代码，用于凸显当前元素所占空间，完工后注掉 */
}
.list .list-3{
/* 背景图 */
background-image:url('images/west_03.png');
/* 当前标签的定位 */
position:absolute; /* 定位：绝对定位 */
top:0; /* 当前标签的上方距离当前标签的父标签的距离：0 */
left:40%; /* 当前标签的左边距离父标签的距离：父标签宽度的40% */
/* 动画： 动画名称 秒数 步 循环播放 - 适用于单位人物的动画 */
animation:ts 1s steps(8) infinite ;
}
.list .list-1{
background-image:url('images/west_01.png');
position:absolute;
top:0;
left:5%;
background-position:1px 0;
animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
}
.list .list-2{
background-image:url('images/west_02.png');
position:absolute;
top:0;
left:25%;
animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
}
.list .list-4{
background-image:url('images/west_04.png');
position:absolute;
top:0;
left:60%;
animation:ss 1s steps(8) infinite ;/* 动画 动画名称 */
}
/* 动画 ，run 对应 animation:run 1s steps(8) infinite ; 中的run */
@keyframes run{
to{
background-position:-1600px 0;
}
}
@keyframes ts{
to{
background-position: -1360px 0;
}
}
@keyframes ss{
to{
background-position: -1680px 0;
}
}
@keyframes bg{
to{
background-position: 1920px 0;
}
}
</style>
</head>
<body>
<div class='list'>
<div class='list-1'></div>
<div class='list-2'></div>
<div class='list-3'></div>
<div class='list-4'></div>
</div>
</body>
</html>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>西天取经</title>
<style>
body{
margin: 0; /* 去除外边距 */
background-image:url('images/bac.webp');
background-position:1px 0;
/* 动画： 动画名称 秒数 步 循环播放 - 适用于bgi */
animation:bg 100s steps(1920) infinite ;/* 动画 动画名称 */
}
.list{
position:relative; /* 相对定位 */
width:100%;
height:200px;
/*background:red;*/
top:400px;
}
.list div{
width:180px;
height:180px;
/* background-color:skyblue; */
}
.list .list-1{
/* 背景图：url('图片存储路径') */
background-image:url('images/west_01.png');
/* 定位 */
position:absolute; /* 定位：绝对定位 */
top:0; /* 当前标签的上方距离当前标签的父标签距离：0 */
left:5%; /* 当前标签的左边距离父标签的距离：父标签宽度的5% */
background-position:1px 0;
/* 动画： 动画名称 秒数 步 循环播放 - 适用于单位人物的动画 */
animation:run 1s steps(8) infinite ;
}
.list .list-2{
background-image:url('images/west_02.png');
position:absolute;
top:0;
left:25%;
animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
}
.list .list-3{
/* 背景图 */
background-image:url('images/west_03.png');
/* 定位 */
position:absolute; /* 定位：绝对定位 */
top:0; /* 当前标签的上方距离当前标签的父标签距离：0 */
left:40%; /* 当前标签的左边距离父标签的距离：父标签宽度的40% */
/* 动画： 动画名称 秒数 步 循环播放 - 适用于单位人物的动画 */
animation:ts 1s steps(8) infinite ;
}
.list .list-4{
background-image:url('images/west_04.png');
position:absolute;
top:0;
left:60%;
animation:ss 1s steps(8) infinite ;/* 动画 动画名称 */
}
/* 动画 ，run 对应 animation:run 1s steps(8) infinite ; 中的run */
@keyframes run{
to{
background-position:-1600px 0; /* -1600px:与动画原图像素有关 */
/* 1600px 为什么加“-”负号？在浏览器开发者模式中可为其增加删去“-”号，自行探索原因 */
}
}
@keyframes ts{
to{
background-position: -1360px 0;
}
}
@keyframes ss{
to{
background-position: -1680px 0;
}
}
@keyframes bg{
to{
background-position: 1920px 0; /* 注意：这里没有负号 */
}
}
</style>
</head>
<body>
<div class='list'>
<div class='list-1'></div>
<div class='list-2'></div>
<div class='list-3'></div>
<div class='list-4'></div>
</div>
</body>
</html>
get :
如何启动动画
动画图片的格式