先上效果
🌟 轮播图是一种常见的视觉元素，用于展示图片、信息或故事。CSS轮播图动画通过平滑的过渡效果和动态的视觉表现，极大地增强了轮播图的吸引力和用户体验。本文将探讨如何使用CSS来创建一个响应灵敏、动画流畅的轮播图，让网站内容的展示更加生动和有趣。
完整代码
以下是完整代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { padding: 0; margin: 0; } li { list-style: none; } body, html { width: 100%; height: 100%; display: flex; } :root { --w: 400; --speed: 2s; } .g-container { width: 400px; margin: auto; height: 240px; line-height: 240px; font-size: 20px; background: #673ab7; color: #fff; overflow: hidden; border: 2px solid #766c6c; } ul { display: flex; flex-wrap: nowrap; } ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; } ul li img { width: 100%; height: 100%; object-fit: cover; } ul { animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite; } ul li { white-space: nowrap; cursor: pointer; animation: move1 calc(var(--speed)) infinite; } @keyframes move { 0% { transform: translate(0, 0px); } 100% { transform: translate(calc(var(--s) * var(--w) * -1px), 0); } } @keyframes move1 { 0% { transform: translate(0, 0px); } 80%, 100% { transform: translate(calc(var(--w) * -1px), 0); } } </style> </head> <body> <div class="g-container"> <ul style="--s: 4"> <li> <img src="./1.png"> </li> <li> <img src="./2.png"> </li> <li> <img src="./3.png"> </li> <li> <img src="./4.png"> </li> <!--末尾补一个首尾数据--> <li> <img src="./1.png"> </li> </ul> </div> </body> </html>
🌟 关键技术点如下：
- Flexbox布局：
ul { display: flex; flex-wrap: nowrap; }：使用flex布局来水平排列列表项，并禁止换行。ul li { flex-shrink: 0; width: 100%; height: 100%; box-sizing: border-box; }：设置列表项不收缩，宽高为100%，并使用box-sizing: border-box;来包含边框和内边距。
- 图片样式：
ul li img { width: 100%; height: 100%; object-fit: cover; }：使图片占满整个列表项，并使用object-fit: cover;来保证图片的封面效果。
- 动画效果：
ul和ul li的动画使用了animation属性，分别命名为move和move1，并使用了CSS变量--speed和--s来控制动画的速度和步数。@keyframes move和@keyframes move1：定义了两个关键帧动画，分别用于整个列表和单个列表项的移动。
- 无限循环：
- 在
ul中末尾补了一个首尾数据，结合动画的步骤（steps(var(--s))）和无限循环（infinite），实现了无缝滚动效果。
