纯CSS实现跑马灯效果

作者：System 时间：2024年08月20日分类：所有,css3 字数：870

要使用纯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秒滚动整个文本宽度的距离，并且无限循环。

纯CSS实现跑马灯效果

评论已关闭

推荐阅读