简单HTML轮播图代码示例 - 使用 CSS 动画实现
<!DOCTYPE html> <html> <head> <style> .slideshow { position: relative; width: 100%; height: 300px; overflow: hidden; }
.slideshow img { position: absolute; width: 100%; height: 100%; object-fit: cover; animation: slide 6s infinite; }
@keyframes slide {
0% { opacity: 0; }
20% { opacity: 1; }
33.33% { opacity: 1; }
53.33% { opacity: 0; }
100% { opacity: 0; }
}
</style>
</head>
<body>
<div class="slideshow">
<img src="image1.jpg" alt="Image 1">
<img src="image2.jpg" alt="Image 2">
<img src="image3.jpg" alt="Image 3">
</div>
</body>
</html>
在这个示例中，轮播图被包裹在一个具有.slideshow类的<div>元素中。每个图片都是一个<img>元素，并在CSS中使用position: absolute;将其定位在轮播图容器中。通过使用animation属性，每个图片都会在6秒的动画中渐变显示和隐藏。
原文地址: https://www.cveoy.top/t/topic/pWDd 著作权归作者所有。请勿转载和采集!