image.png
image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#waiceng{
width: 900px;
height: 375px;
position: relative;
border-radius: 5px;
overflow: hidden;
}
.box{
height: 375px;
overflow: hidden;
position: relative;
width: calc(500px * 3);
}
.play{
width: 500px;
height: 375px;
position: absolute;
overflow: hidden;
}
.play1{left: 0px;z-index:0;}
.play2{left: 200px;z-index:10;}
.play3{left: 400px;z-index:20;}
.play1{
animation: leftMove1 6s ease-out infinite;
animation-timing-function: cubic-bezier(0.2, 0.7, 0.5, 1);
}
@keyframes leftMove1{
0%{left: 0px;z-index:20;}
40%{left: 400px;z-index:20;}
80%{left: 200px;z-index:10;}
100%{left: 0px;z-index:0;}
}
.play2{
animation: leftMove2 6s ease-out infinite;
animation-timing-function: cubic-bezier(0.06, 0.82, 0.165, 1);
}
@keyframes leftMove2{
0%{left: 200px;z-index:10}
40%{left: 0px;z-index:0}
41%{left: 0px;z-index:20}
80%{left: 400px;z-index:20}
100%{left: 200px;z-index:10}
}
.play3{
animation: leftMove3 6s ease-in infinite;
animation-timing-function: cubic-bezier(0.2, 0.5, 0.7, 1);
}
@keyframes leftMove3{
0%{left: 400px;z-index:20;}
40%{left: 200px;z-index:10;}
80%{left: 0px;z-index:0;}
81%{left: 0px;z-index:20;}
100%{left: 400px;z-index:20;}
}
</style>
</head>
<body>
<div id="waiceng">
<div class="box">
<div class = "play play1">
<img src="https://img0.baidu.com/it/u=1604010673,2427861166&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=889">
</div>
<div class="play play2">
<img src="https://img1.baidu.com/it/u=1890390320,3399874998&fm=253&fmt=auto&app=120&f=JPEG?w=1422&h=800">
</div>
<div class="play play3">
<img src="https://hbimg.b0.upaiyun.com/992e56ace8aa634cb778eb0f0e5254d4e9a843a236641-YgHkgm_fw658">
</div>
</div>
</div>
</body>
</html>
