首页css图片切换过渡效果

css图片切换过渡效果

时间: 2023-11-17 17:04:21 浏览: 283

以下是一个使用CSS实现图片切换过渡效果的例子： ```html <!DOCTYPE html> <html> <head> <title>CSS Image Transition</title> <style> .container { width: 500px; height: 500px; position: relative; overflow: hidden; } .container img { position: absolute; top: 0; left: 0; opacity: 0; transition: opacity 1s ease-in-out; } .container img.active { opacity: 1; } </style> </head> <body> <div class="container"> <img src="image1.jpg" class="active"> <img src="image2.jpg"> <img src="image3.jpg"> </div> <script> var images = document.querySelectorAll('.container img'); var index = 0; setInterval(function() { images[index].classList.remove('active'); index = (index + 1) % images.length; images[index].classList.add('active'); }, 3000); </script> </body> </html> ``` 这个例子中，我们使用了一个包含多张图片的容器，并将所有图片的位置设置为绝对定位。我们使用opacity属性来控制图片的透明度，使用transition属性来定义过渡效果。在JavaScript中，我们使用setInterval函数来定时切换图片。

阅读全文