修复：Webkit 关键帧图像库不显示所有图像
Posted
技术标签:
【中文标题】修复：Webkit 关键帧图像库不显示所有图像【英文标题】：Fixed: Webkit key frames image gallery not displaying all image 【发布时间】：2022-01-08 01:19:21 【问题描述】：.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" ></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" >
</div>
<div class="Image">
<img src="CSS/images/Female_Cln.jpeg" >
</div>
<div class="Image">
<img src="CSS/images/Male_Cln.jpeg" >
</div>
</div>
</div>
</main>
</body>
</html>这是我需要为我的大学课程工作建立的网站的一部分。
图库将显示第一张图片并旋转，但不显示下一张图片，仅显示背景颜色。
我尝试将 webkit 动画更改为从左到右，但没有成功。 代码验证没有任何错误。
我想让这三个图像自动旋转
【问题讨论】：
【参考方案1】：解决了这个问题。
加载的图像堆叠在另一个之上。还有比动画大的图片。
<!--- 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;
【讨论】：
以上是关于修复：Webkit 关键帧图像库不显示所有图像的主要内容，如果未能解决你的问题，请参考以下文章
仅在 Chrome 上修复了剪贴路径或图像掩码的 CSS 位置问题