在我们不使用JS的情况下，是否也可以实现轮播功能呢？
答应是可以的
上代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播</title> <style> .boss { position: relative; width: 200px; height: 200px; overflow: hidden; } .boss>div { width: 10000px; height: 200px; border: 1px solid #000; } .box { display: flex; position: absolute; top: 0; left: 0; } .box>div { width: 200px; height: 200px; animation: move 10s infinite ease-out; } /* 关键帧 平移即可 */ @keyframes move { 0% { transform: translateX(0%); } 25% { transform: translateX(-100%); } 50% { transform: translateX(-200%); } 75% { transform: translateX(-300%); } 100% { transform: translateX(-400%); } } </style> </head> <body> <div class="boss"> <div class="box"> <!-- 第一个背景颜色是pink 最后一个也是pink色 --> <div style="background-color: pink;"></div> <div style="background-color: red;"></div> <div style="background-color: green;"></div> <div style="background-color: yellow;"></div> <div style="background-color: pink;"></div> </div> </div> </body> </html>
效果图：
感谢大家的阅读，如有不对的地方，可以向我提出，感谢大家！
