【css】一个只用css即可实现的完美跑马灯方案

Point酱

于 2023-03-29 10:35:42 发布

阅读量502

点赞数

分类专栏：前端文章标签： css html 前端

本文链接：https://blog.youkuaiyun.com/weixin_40571965/article/details/129831859

版权

前端专栏收录该内容

41 篇文章

订阅专栏

文章展示了如何使用HTML、CSS和JavaScript创建一个在页面上方跑马灯效果的文字滚动播放条，当鼠标悬停时，滚动会暂停。主要通过CSS的动画关键帧(@keyframes)和CSS的hover伪类来控制文字的滚动和暂停。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

需求

1、一段文字在页面上方滚动播放，即跑马灯

2、鼠标移动上去，字会停住

代码如下：可以自己尝试

<html>
 <div class="marquee">
   <ul>
    <li>公告1</li>
  </ul>
</div>
</html>

<style type="text/css">
.marquee {
  width: 100%;
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  overflow: hidden;
  white-space: nowrap;
}
.marquee ul {
  display: inline-block;
  padding-left: 100%;
  animation: marquee 15s linear infinite;
}
.marquee ul:hover{
  animation-play-state: paused;
}
.marquee li {
  display: inline-block;
  padding-right: 100%;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

</style>