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

最新推荐文章于 2023-07-14 17:27:52 发布

Point酱

最新推荐文章于 2023-07-14 17:27:52 发布

阅读量305

点赞数

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

本文链接：https://blog.csdn.net/weixin_40571965/article/details/129831859

版权

前端专栏收录该内容

41 篇文章 0 订阅

订阅专栏

需求

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>