纯CSS实现跑马灯效果
要使用纯CSS实现跑马灯效果，可以使用@keyframes规则创建动画，并结合animation属性应用到文本上。以下是一个简单的例子：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Marquee Text</title>
<style>
.marquee {
white-space: nowrap;
overflow: hidden;
width: 100%;
}
.marquee-text {
display: inline-block;
padding-left: 100%;
animation: marquee 10s linear infinite;
}
@keyframes marquee {
0% { transform: translateX(0); }
100% { transform: translateX(-100%); }
}
</style>
</head>
<body>
<div class="marquee">
<span class="marquee-text">这是跑马灯效果的文本 - 它会不断滚动起来</span>
</div>
</body>
</html>在这个例子中，.marquee-text 是要滚动的文本，.marquee 是滚动容器。@keyframes 规则定义了名为 marquee 的动画，它通过改变 transform 的 translateX 值来实现滚动效果。动画设置为每10秒滚动整个文本宽度的距离，并且无限循环。
评论已关闭