实训学习HTML和CSS过程中完成的作业
实现大话西游中师徒四人的循环运动
加上了一点点个人的恶搞哈哈哈
~ o( ̄▽ ̄)ブ
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>大话西游</title>
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
html,
body {
height: 100%;
}
.p {
z-index: 3;
font-size: 100px;
float: left;
position: absolute;
right: 520px;
top: 180px;
}
.beijing {
background-size: cover;
height: 100%;
width: 100%;
float: left;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.beijing ul {
height: 100%;
width: 3920px;
position: absolute;
top: 0;
left: 0;
animation: move4 50s linear infinite;
}
.beijing ul li {
height: 100%;
width: 100%;
background: url(./大话西游/background.jpg);
float: left;
margin-left: -2000px;
background-repeat: no-repeat;
}
.wk {
z-index: 3;
width: 200px;
height: 180px;
background-image: url(./大话西游/wk.png);
float: left;
position: absolute;
left: 500px;
top: 300px;
animation: move1 1s steps(8) infinite;
}
.bj {
z-index: 3;
width: 200px;
height: 180px;
background-image: url(./大话西游/bj.png);
float: left;
position: absolute;
left: 700px;
top: 300px;
animation: move5 1s steps(8) infinite;
}
.ts {
z-index: 3;
width: 170px;
height: 240px;
background-image: url(./大话西游/ts.png);
float: left;
position: absolute;
left: 900px;
top: 280px;
animation: move3 1s steps(8) infinite;
}
.ss {
z-index: 3;
width: 210px;
height: 200px;
background-image: url(./大话西游/ss.png);
float: left;
position: absolute;
left: 1100px;
top: 300px;
animation: move2 1.5s steps(8) infinite;
}
@keyframes move1 {
50% {
top: 100px;
}
to {
background-position: -1600px;
top: 300px;
}
}
@keyframes move5 {
50% {
top: 500px;
}
to {
background-position: -1600px;
top: 300px;
}
}
@keyframes move2 {
33% {
top: 500px;
}
to {
background-position: -1680px;
top: 300px;
}
}
@keyframes move3 {
50% {
left: 1100px;
}
to {
left: 900px;
background-position: -1360px;
}
}
@keyframes move4 {
0% {
left: 0;
}
100% {
left: 1920px;
}
}
@keyframes leftright {
50% {
position: absolute;
top: 500px;
}
100% {
position: absolute;
top: 300px;
}
}
</style>
</head>
<body>
<div class="p">
<p>?</p>
</div>
<div class="wk"></div>
<div class="bj"></div>
<div class="ts"></div>
<div class="ss"></div>
<div class="beijing">
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>