本文关注如何在一个网页中使用纯 CSS 实现文字轮播和图片轮播。文字轮播适用于做全站广播，图片轮播适用于在固定区域内循环展示一组图片，它们两者都可以使用 CSS 动画来实现。
1 文字轮播
文字轮播即是在水平方向或垂直方向无限循环展示一组文字。
一个水平方向的文字轮播效果如下：
其完整代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Text Carousel</title>
<style>
:root {
/* 轮播的条数 */
--s: 6;
/* 单个条目的高度 */
--h: 36;
/* 单次动画的时长 */
--speed: 3s;
}
.container {
width: 200px;
height: calc(var(--h) * 1px);
line-height: calc(var(--h) * 1px);
border-radius: 4px;
border: 1px solid darkgray;
overflow: hidden;
}
ul {
margin-top: auto;
margin-bottom: auto;
animation: move calc(var(--speed) * var(--s)) steps(var(--s)) infinite;
}
ul li {
white-space: nowrap;
list-style: none;
animation: liMove calc(var(--speed)) infinite;
}
@keyframes move {
0% {
transform: translate(0, 0);
}
100% {
transform: translate(0, calc(var(--s) * var(--h) * -1px));
}
}
@keyframes liMove {
0% {
transform: translate(0, 0);
}
80%,
100% {
transform: translate(0, calc(var(--h) * -1px));
}
}
</style>
</head>
<body>
<div class="container">
<ul style="--s: 4">
<li>Text Carousel 1</li>
<li>Text Carousel 2</li>
<li>Text Carousel 3</li>
<li>Text Carousel 4</li>
<!-- 将第一条数据补到末尾 -->
<li>Text Carousel 1</li>
</ul>
</div>
</body>
</html>本文经授权后发布，本文观点不代表立场，文章出自：https://leileiluoluo.com/posts/creating-a-carousel-using-css.html
