1.整体效果
轮播图是一种常见的视觉元素，用于展示图片、信息或故事。CSS轮播图动画通过平滑的过渡效果和动态的视觉表现，极大地增强了轮播图的吸引力和用户体验。本文将探讨如何使用CSS来创建一个响应灵敏、动画流畅的轮播图，让网站内容的展示更加生动和有趣。
2.完整代码
HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>轮播图</title> <link rel="stylesheet" type="text/css" href="6_11.css"> </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>
CSS
* { 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); } }
关键技术点如下：
- 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），实现了无缝滚动效果。
