我在抖音[亿以网络]的第二节网课！
梦幻西游官网改了，素材没有了，搬运：css3仿梦幻西游场景动画特效
<html>
<head>
<title>梦幻西游</title>
<style>
body {
background: url("bg.jpg");
animation: bg 50s linear infinite;
}
@keyframes bg {
0% { background-position-x: 0px; }
100% { background-position-x: 1920px; }
}
.footer {
width: 760px;
height: 240px;
margin: 300px auto;
}
.role {
float: left;
width: 190px;
height: 240px;
background-repeat: no-repeat;
background-position-y: center;
}
.role1 {
background-image: url("west_01.png");
animation: role1 1.4s steps(8) infinite;
}
@keyframes role1 {
0% { background-position-x: 0px; }
100% { background-position-x: -1600px; }
}
.role2 {
background-image: url("west_02.png");
animation: role1 1.4s steps(8) infinite;
}
@keyframes role2 {
0% { background-position-x: 0px; }
100% { background-position-x: -1600px; }
}
.role3 {
background-image: url("west_03.png");
animation: role3 1.4s steps(8) infinite;
}
@keyframes role3 {
0% { background-position-x: 0px; }
100% { background-position-x: -1360px; }
}
.role4 {
background-image: url("west_04.png");
animation: role4 1.4s steps(8) infinite;
}
@keyframes role4 {
0% { background-position-x: 0px; }
100% { background-position-x: -1680px; }
}
</style>
</head>
<body>
<div class="footer">
<div class="role role1"></div>
<div class="role role2"></div>
<div class="role role3"></div>
<div class="role role4"></div>
</div>
</body>
</html>