首页html移动型轮播图代码

html移动型轮播图代码

时间: 2023-05-12 18:05:18 浏览: 73

以下是一个简单的 HTML 移动型轮播图代码： ```html <!DOCTYPE html> <html> <head> <title>移动型轮播图</title> <style> .container { position: relative; width: 100%; height: 300px; overflow: hidden; } .slider { position: absolute; top: 0; left: 0; width: 300%; height: 100%; display: flex; animation: slide 10s infinite; } .slide { flex: 1; height: 100%; background-color: #ccc; display: flex; align-items: center; justify-content: center; font-size: 48px; color: #fff; } .slide:nth-child(1) { background-color: #f00; } .slide:nth-child(2) { background-color: #0f0; } .slide:nth-child(3) { background-color: #00f; } @keyframes slide { 0% { transform: translateX(0); } 33.33% { transform: translateX(-100%); } 66.66% { transform: translateX(-200%); } 100% { transform: translateX(0); } } </style> </head> <body> <div class="container"> <div class="slider"> <div class="slide">1</div> <div class="slide">2</div> <div class="slide">3</div> </div> </div> </body> </html> ``` 这是一个基于 CSS3 动画的移动型轮播图，使用了 flex 布局和 translateX 变换实现。