连续播放多张图片无间隙
连续播放多张图片
点击查看代码
<html>
<head>
<title>我的第一个 HTML 页面</title>
</head>
<body>
<div class="image-container">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.Zte3ljd4g6kqrWWyg-8fhAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Image 1">
<img src="https://ts1.cn.mm.bing.net/th?id=OIP-C.7-6n_pwnAPz_IkgyRuRI2wHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Image 2">
<img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.E6m4s0dlHQhce_kPus5WJAHaEo&w=316&h=197&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2" alt="Image 3">
<img src="https://ts3.cn.mm.bing.net/th?id=OIP-C.Cdq25dINGG8gky7W0x8XaQHaE7&w=306&h=204&c=8&rs=1&qlt=90&o=6&dpr=1.3&pid=3.1&rm=2"alt="Image-4">
</div>
</body>
<style>
.image-container {
width: 800px;
overflow: hidden;
position: relative;
display:flex;
}
.image-container img {
width:200px;
position: relative;
top: 0;
right: 0;
}
.image-container img:nth-child(1) {
animation: slideLeft1 10s linear infinite;
}
.image-container img:nth-child(2) {
animation: slideLeft2 10s linear infinite;
}
.image-container img:nth-child(3) {
animation: slideLeft3 10s linear infinite;
}
.image-container img:nth-child(4){
animation: slideLeft4 10s linear infinite;
}
@keyframes slideLeft1 {
0%{
transform:translateX(0);
}
20%{
visibility:hidden;
transform:translateX(-200px);
}
20.2%{
visibility:hidden;
transform:translateX(600px);
}
40.2%
{
transform:translateX(400px);
}
60.2%
{
transform:translateX(200px);
}
80.2%
{
transform:translateX(0px);
}
}
@keyframes slideLeft2 {
0%{
transform:translateX(0);
}
20%{
transform:translateX(-200px);
}
40%{
visibility:hidden;
transform:translateX(-400px);
}
40.2%{
visibility:hidden;
transform:translateX(400px);
}
60.2%
{
transform:translateX(200px);
}
80.2%{
transform:translateX(0px);
}
}
@keyframes slideLeft3 {
0%{
transform:translateX(0);
}
20%{
transform:translateX(-200px);
}
40%{
transform:translateX(-400px);
}
60%{
visibility:hidden;
transform:translateX(-600px);
}
60.2%{
visibility:hidden;
transform:translateX(200px);
}
80.2%{
transform:translateX(0px);
}
}
@keyframes slideLeft4 {
0%{
transform:translateX(0);
}
20%{
transform:translateX(-200px);
}
40%{
transform:translateX(-400px);
}
60%{
transform:translateX(-600px);
}
80%{
visibility:hidden;
transform:translateX(-800px);
}
80.2%{
visibility:hidden;
transform:translateX(0px);
}
}
</style>
</html>
