孙悟空师徒一行4人西行动态Html
1.代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
/*选中全部*/
*{
margin: 0;
padding: 0;
list-style: none;
}
html,body{
width: 100%;
height: 100%;
}
/*动画的现实区域*/
.main{
width: 100%;
height: 100%;
/*border: 2px solid red;*/
position: relative;
overflow: hidden;
}
/*设置背景图的包裹区域*/
.bg{
height: 100%;
width: 3920px;
/*border: 2px solid blue;*/
position: absolute;
left: 0;
top: 0;
animation: bgFn 10s linear infinite;
}
@keyframes bgFn{
from{left: 0;}
to{left: 1920px;}
}
/*加入背景图片*/
ul li{
width: 100%;
height: 100%;
background: url(imgs/1.jpg);
margin-left: -2000px;
}
.wk{
width: 200px;
height: 180px;
background: url(imgs/west_01_3ca39fe.png) no-repeat;
position: absolute;
left: 20%;
top: 55%;
z-index: 1;
/*wkMove:动画的名称；
1s steps(8):分为8段去执行wkMove动画，每段是1s */
animation: wkMove 1s steps(8) infinite;
}
@keyframes wkMove{
from{background-position: 0px 0px;}
to{background-position: -1600px 0px;}
}
.bj{
width: 200px;
height: 180px;
background: url(imgs/west_02_47bad19.png) no-repeat;
position: absolute;
left: 35%;
top: 55%;
z-index: 1;
animation: bjMove 1s steps(8)infinite;
}
@keyframes bjMove{
from{background-position: 0px 0px;}
to{background-position: -1600px 0px;}
}
.ts{
width: 170px;
height: 240px;
background: url(imgs/west_03_f962447.png) no-repeat;
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
animation: tsMove 1s steps(8)infinite;
}
@keyframes tsMove{
from{background-position: 0px 0px;}
to{background-position: -1360px 0px;}
}
.ss{
width: 210px;
height: 200px;
background: url(imgs/west_04_6516d80.png) no-repeat;
position: absolute;
left: 62%;
top: 57%;
z-index: 1;
animation: ssMove 1s steps(8)infinite;
}
@keyframes ssMove{
from{background-position: 0px 0px;}
to{background-position: -1680px 0px;}
}
</style>
</head>
<!--悟空-->
<div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<!--动画的现实区域-->
<div class="main">
<!--背景图的包裹区域-->
<ul class="bg">
<!--背景图的存放区域-->
<li></li>
</ul>
</div>
</body>
</html>
2.效果图
浙公网安备 33010602011771号