先给大家看一下效果图（PS：其实是动图的）
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 ;/* 动画 动画名称 */
background-size: cover;
background-attachment: fixed;
background-position: center 0;
}
.list{
position:relative; /* 相对定位 */
width:100%;
height:200px;
/*background:red;*/
top:600px;
}
@media screen and (max-width: 1221px) {
.wapnone{
top:130ch;
}
}
.list div{
width:180px;
height:180px;
/* background-color:skyblue; */
}
.list .list-1{
background-image:url('images/west_01.png');
position:absolute;
top:0;
left:20%;
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:35%;
animation:run 1s steps(8) infinite ;/* 动画 动画名称 */
}
.list .list-3{
/* 背景图 */
background-image:url('images/west_03.png');
/* 定位 */
position:absolute; /* 定位：绝对定位 */
top:0; /* 当前标签的上方距离当前标签的父标签距离：0 */
left:50%; /* 当前标签的左边距离父标签的距离：父标签宽度的40% */
/* 动画： 动画名称 秒数 步 循环播放 - 适用于单位人物的动画 */
animation:ts 1s steps(8) infinite ;
}
.list .list-4{
background-image:url('images/west_04.png');
position:absolute;
top:0;
left:65%;
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 wapnone'>
<div class='list-1'></div>
<div class='list-2'></div>
<div class='list-3'></div>
<div class='list-4'></div>
</div>
</body>
</html>
一、本站上的部份代码及教程来源于互联网，仅供网友学习交流。如有侵权，无意侵害您的权益，请发送邮件至xutian#ahap.cn或点击右侧 联系我们，我们将尽快处理。
二、请勿将购买的资源教程转载或分享与他人！
二、请勿将购买的资源教程转载或分享与他人！
