.Image_Cont {
top: 20%;
left: 40%;
position: absolute;
width: 300px;
height: 450px;
background-color: #fff;
overflow: hidden;
}
.Scroll_Image {
top: 0%;
left: 0%;
position: absolute;
width: 100%;
height: 100%;
}
.Image {
width: 100%;
height: 100%;
position: relative;
-webkit-animation-name: slide_animation;
-webkit-animation-duration: 3s; /* changed from 33s for demo purposes */
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: alternate;
-webkit-animation-play-state: running;
}
.Image img {
top: 0%;
left: 0%;
width: 100%;
height: 100%;
}
@-webkit-keyframes slide_animation {
0% {
left: 0px;
}
10% {
left: 0px;
}
20% {
left: 300px;
}
30% {
left: 300px;
}
40% {
left: 600px;
}
50% {
left: 600px;
}
60% {
left: 300px;
}
70% {
left: 300px;
}
80% {
left: 0px;
}
90% {
left: 0px;
}
100% {
left: 0px;
}
}<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="CSS/style.css" rel="stylesheet" type="text/css" />
<title>Homepage</title>
</head>
<body>
<header>
<a href="index.html" class="header-logo"> <img src="CSS/images/Logo.jpeg" alt="BeMe Logo"></a>
<nav>
<ul>
<li><a href="products.html">Products</a></li>
<li><a href="about_us.html">About us</a></li>
<li><a href="contact_us.html">Contact us</a></li>
<li><a href="find_us.html">Find us</a></li>
<li><a href="basket.html">Basket</a></li>
</ul>
</nav>
</header>
<main>
<div class="Image_Cont">
<div class="Scroll_Image">
<div class="Image">
<img src="CSS/images/Logo_Rot.jpeg" alt="Logo rotated">
</div>
<div class="Image">
<img src="CSS/images/Female_Cln.jpeg" alt="Example of Female Clone">
</div>
<div class="Image">
<img src="CSS/images/Male_Cln.jpeg" alt="Example of Male Clone">
</div>
</div>
</div>
</main>
</body>
</html>这是我需要为我的大学课程工作建立的网站的一部分。
图库将显示第一张图像并旋转，但不会显示下一张图像，只显示背景色。
我尝试过将webkit动画从左向右更改，但没有成功。代码验证时没有任何错误。
我希望这三张图像能通过自动旋转
修复了该问题。
加载的图像堆叠在另一个图像的顶部。以及比动画大的图像。
<!--- This is the working code-->
@-webkit-keyframes slide_animation{
0%{bottom: 0px;}
10%{bottom: 0px;}
20%{bottom: 0px;}
30%{bottom: 450px;}
40%{bottom: 450px;}
50%{bottom: 900px;}
60%{bottom: 900px;}
70%{bottom: 450px;}
80%{bottom: 450px;}
90%{bottom: 0px;}
100%{bottom: 0px;}
}