首页写一个炫酷的html5轮播图

写一个炫酷的html5轮播图

时间: 2024-02-05 17:11:07 浏览: 72

好的，以下是一个简单的 HTML5 轮播图示例： ```html <!DOCTYPE html> <html> <head> <title>HTML5 轮播图</title> <style> .container { width: 600px; height: 400px; margin: auto; position: relative; overflow: hidden; } .slider { width: 3000px; height: 400px; position: absolute; top: 0; left: 0; animation: slide 10s infinite; } .slide { width: 600px; height: 400px; float: left; } .slide img { width: 100%; height: 100%; object-fit: cover; } @keyframes slide { 0% { left: 0; } 20% { left: 0; } 25% { left: -600px; } 45% { left: -600px; } 50% { left: -1200px; } 70% { left: -1200px; } 75% { left: -1800px; } 95% { left: -1800px; } 100% { left: -2400px; } } </style> </head> <body> <div class="container"> <div class="slider"> <div class="slide"> <img src="image1.jpg" alt="Image 1"> </div> <div class="slide"> <img src="image2.jpg" alt="Image 2"> </div> <div class="slide"> <img src="image3.jpg" alt="Image 3"> </div> <div class="slide"> <img src="image4.jpg" alt="Image 4"> </div> <div class="slide"> <img src="image5.jpg" alt="Image 5"> </div> </div> </div> </body> </html> ``` 解释： - `.container` 元素设置为相对定位，设置 `width` 和 `height` 为容器的大小，设置 `overflow` 为 `hidden` 来防止图片超出容器范围。 - `.slider` 元素设置为绝对定位，设置 `width` 为图片总宽度，设置 `animation` 属性来控制轮播动画。 - `.slide` 元素设置为浮动元素，设置 `width` 和 `height` 为图片大小。 - `@keyframes slide` 定义了轮播动画的关键帧，通过不同的时间点来控制图片的位置。可以将上面的代码保存为一个 HTML 文件并保存图片到相应的路径，然后在浏览器中打开该文件，即可看到一个简单的 HTML5 轮播图。

阅读全文