梦幻西游动画制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>梦幻西游</title>
</head>
<style>
* {
margin: 0;
padding: 0;
}
html,body,.contanier {
height: 100%;
}
body {
overflow: hidden;
}
.contanier {
background-image: url('https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/2.jpg');
width: 3920px;
margin-left: -1920px;
animation: bj 20s linear infinite;
}
.view {
height: 200px;
width: 1000px;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
.view div {
float: left;
margin-right: 30px;
overflow: hidden;
}
.wk, .bj {
height: 180px;
width: 200px;
}
.wk img,
.bj img {
animation: wk 1s steps(8) infinite;
}
.ts img {
animation: ts 1s steps(8) infinite;
}
.ts {
height: 240px;
width: 170px;
margin-top: -40px;
}
.ss {
height: 200px;
width: 210px;
float: left;
}
.ss img {
animation: ss 1s steps(8) infinite;
}
@keyframes wk {
form {
margin-left: 0;
}
to {
margin-left: -1600px;
}
}
@keyframes bj {
from {
margin-left: -1920px;
}
to {
margin-left: 0;
}
}
@keyframes ts {
from {
margin-left: 0;
}
to {
margin-left: -1360px;
}
}
@keyframes ss {
from {
margin-left:0 ;
}
to {
margin-left: -1680px;
}
}
</style>
<body>
<!-- 背景图片 -->
<div class="contanier"></div>
<!-- 视口 -->
<div class="view">
<div class="wk">
<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_01_3ca39fe.png" alt="">
</div>
<div class="bj">
<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_02_47bad19.png" alt="">
</div>
<div class="ts">
<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_03_f962447.png" alt="">
</div>
<div class="ss">
<img src="https://www.17sucai.com/preview/826404/2018-06-25/xyj/imgs/west_04_6516d80.png" alt="">
</div>
</div>
</body>
</html>
示列网页
注意：本文章依据17素材网所提供素材进行编写！
本文地址：https://blog.csdn.net/weixin_45044528/article/details/107393088
