梦幻西游html简易代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"content="width=device-width, initial-scale=1.0">
<title>梦幻西游</title>
<style>
*{
margin: 0px;
padding: 0px;
}
html,body{
height: 100%;
}
div.bg{
height: 100%;
background-image:url('./images/background.jpg');
animation-name: bg;
animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}
width: 1000px;
height: 180px;
/* border: 1px solid red; */
/* div浮div起来(上) */
position: absolute;
left: 150px;
bottom: 100px;
}
width: 200px;
height: 180px;
list-style: none;
margin-right: 50px;
/* ⼈物与⼈物之间的距离 */
float: left;
/* ⼀⾏中展⽰ */
overflow: hidden;
}
width: 1600px;
height: 180px;
/* background-color: royalblue; */
animation-name: roles;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-timing-function:steps(8);
}
width: 1600px;
height: 180px;
}
@keyframes roles{
from{
margin-left: 0px;
html代码转链接}
to{
margin-left: -1600px;
}
}
@keyframes bg{
from{
margin-left: -2000px;
}
to{
margin-left: 0px;
}
}
</style>
</head>
<body>
<div class="bg"></div>
<div class="bg"></div>
<div class="content">
<ul>
<li>
<div><img src="./images/wk.png"alt=""></div>
</li>
<li>
<div><img src="./images/bj.png"alt=""></div>
</li>
<li>
<div><img src="./images/tc.png"alt=""></div>
</li>
<li>
<div><img src="./images/ss.png"alt=""></div>
</li>
</ul>
</div>
</body>
</html>