使用 CSS 制作 Marquee 效果

17 Mar 2025 | 6 分钟阅读

在本文中，我们将通过 CSS 来理解跑马灯效果。

跑马灯是什么意思？

跑马灯用于在网页中为文本和图像创建水平或垂直滚动效果、动画效果。例如： 电视上的新闻头条滚动。HTML 的 <marquee> 元素并不被广泛使用或不符合标准。因此，要创建跑马灯效果，您需要将 CSS 动画属性与 @keyframes 规则结合使用。

以下是使用 CSS 实现跑马灯效果的示例。

示例 1

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of Marquee Effect using CSS </title>    
        <meta name = "description"/>    
         <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
body {
  background: radial-gradient(600px at 50% 50%, #fff 20%, #000 100%);
}
h1 {
  text-align: center;
  font-family:  "Oswald", Helvetica, sans-serif;
  font-size: 50px;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
h2 {
  text-align: center;
  color: #c0b283;
  font-size: 4em;
  font-weight: 700;
  font-family: Garamond;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -box-sizing: border-box;
}
.ticker {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 20;
}
.news {
  width: 100%;
  background: #342c2c;
}
.news-title {
  width: 180px;
  text-align: center;
  background: #c81c1c;
  position: absolute;
  z-index: 10;
  height: 50px;
}
.news-title:after {
  position: absolute;
  content: " ";
  right: -39px;
  border-left: 20px solid #c81c1c;
  border-top: 28px solid transparent;
  border-right: 20px solid transparent;
  border-bottom: 21px solid transparent;
  top: 0px;
}
.news-title h5 {
  font-size: 17px;
  margin: 8% 0;
  color: #542929;
}
.news marquee {
  font-size: 18px;
  margin-top: 15px;
}
.news-content p {
  margin-right: 41px;
  display: inline;
  color: #ddca7e;
}
@-webkit-keyframes .news-content {
                0% {
                    -webkit-transform: translateX(100%);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }
            @keyframes .news-content {
                0% {
                    -moz-transform: translateX(100%);
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    -webkit-transform: translateX(-100%);
                    transform: translateX(-100%);
                }
            }
</style>
<body>
<h1> Example </h1>
<h2> Marquee Effect using CSS </h2>
<div class = " ">
    <div class = "ticker">
        <div class = "news-title">
            <h5> Breaking News </h5>
        </div>
        <div class = "news">
            <marquee class = "news-content">
                <p> The College will remain close till the further notice of CM. </p>
            </Marquee>
        </div>
    </div>
</div>
</body>
</html>
Explanation:
In the above example, we created an example of marquee effect using CSS. In this we scroll news from left to right by using following code. The code moved in horizontal direction starting form left like a TV news headline.
@-webkit-keyframes .news-content {
                0% {
                    -webkit-transform: translateX(100%);
                }
                100% {
                    -webkit-transform: translateX(-100%);
                }
            }
            @keyframes .news-content {
                0% {
                    -moz-transform: translateX(100%);
                    -webkit-transform: translateX(100%);
                    transform: translateX(100%);
                }
                100% {
                    -moz-transform: translateX(-100%);
                    -webkit-transform: translateX(-100%);
                    transform: translateX(-100%);
                }
            }

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of Marquee Effect using CSS </title>    
        <meta name = "description"/>    
         <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
.ticker {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  height: 50px;
  margin: 0 auto;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 20;
}
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  text-align: center;
  font-family:  "Oswald", Helvetica, sans-serif;
  font-size: 50px;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
h2 {
  text-align: center;
  color: #c0b283;
  font-size: 4em;
  font-weight: 700;
  font-family: Garamond;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -box-sizing: border-box;
}
body {
  margin: 1em;
min-height: 100vh;
  display: grid;
  align-content: center;
  overflow: hidden;
    width: 100%;
  font-family: "Corben", system-ui, sans-serif;
  font-size: 1.5rem;
  line-height: 1.5;
}
.Marquee {
  width: 1260px;
  margin: auto;
  duration: 60s;
  display: flex;
  overflow: hidden;
  user-select: none;
}
.Marqueeuegrp {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: margin-around;
  min-width: 100%;
  animation: scroll var(--duration) linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .Marqueeuegrp {
    animation-play-state: paused;
  }
}
.Marqueeuegrp img {
  max-width: clamp(10rem, 1rem + 28vmin, 20rem);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 1rem;
}
.Marqueeuegrp p {
  background-image: linear-gradient(
    75deg,
    hsl(240deg 70% 49%) 0%,
    hsl(253deg 70% 49%) 11%,
    hsl(267deg 70% 49%) 22%,
    hsl(280deg 71% 48%) 33%,
    hsl(293deg 71% 48%) 44%,
    hsl(307deg 71% 48%) 56%,
    hsl(320deg 71% 48%) 67%,
    hsl(333deg 72% 48%) 78%,
    hsl(347deg 72% 48%) 89%,
    hsl(0deg 73% 47%) 100%
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.Marquee--borders {
  border-block: 3px solid dodgerblue;
  padding-block: 0.75rem;
}
.Marquee--reverse .Marqueeuegrp {
  animation-direction: reverse;
  animation-delay: calc(var(--duration) / -2);
}
@keyframes scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100% - var(--padding)));
  }
}
</style>
<body>
<h1> Example </h1>
<h2> Marquee Effect Using CSS </h2>
<div class="Marquee">
  <div class="Marqueeuegrp">
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
</div>
<div class="Marquee Marquee--reverse">
  <div class="Marqueeuegrp">
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
  <div aria-hidden="true" class="Marqueeuegrp">
<img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
    <img src='https://dummyimage.com/500x400/a615a6/0011ff.png' alt=''>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个跑马灯效果的例子。在这个例子中，我们让图片从左到右移动。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>    
<html>    	
    <head>    	
        <meta http-equiv = "Content-Type"    
            content = "text/html; charset=UTF-8" />    
        <title> Example of Marquee Effect using CSS </title>    
        <meta name = "description"/>    
         <meta content = "width=800, initial-scale=1"    
        name = "viewport" />     
<style>
@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");
@import url(https://fonts.googleapis.com/css?family=Work+Sans:400,300,700|Open+Sans:400italic,300italic);
h1 {
  text-align: center;
  font-family:  "Oswald", Helvetica, sans-serif;
  font-size: 50px;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
h2 {
  text-align: center;
  color: #c0b283;
  font-size: 4em;
  font-weight: 700;
  font-family: Garamond;
  transform: skewY(-1deg);
  letter-spacing: 2px;
  word-spacing: -8px;
  color: tomato;
}
html,
body {
  font-family: "Open Sans", sans-serif;
  background-color: #f3f3f3;
}
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -box-sizing: border-box;
}
body {
  --margin: 2rem;

  display: grid;
  align-content: center;
  overflow: hidden;
  padding: var(--margin);
  width: 100%;
  font-size: 1.2rem;
  font-family: monomargin;
  background-color: #070707;
  color: yellow;
}
.Marquee {
  margin: 0 auto;
  width: 600px; // or 100% inside a container
  height: 30px;
  white-margin: nowrap;
  overflow: hidden;
  box-sizing: border-box;
  position: relative;
  
  &:before, &:after {
    position: absolute;
    top: 0;
    width: 50px;
    height: 30px;
    content: "";
    z-index: 1;
  }
  &:before {
    left: 0;
    background: linear-gradient(to right, white 5%, transparent 100%);
  }
  &:after {
    right: 0;
    background: linear-gradient(to left, white 5%, transparent 100%);
  }
}

.Marqcont {
  width: 300% !important;
  display: flex;
  line-height: 30px;
  animation: Marquee 10s linear infinite forwards;
  &:hover {
    animation-play-state: paused;
  } 
}
.li {
  float: left;
  width: 80%;
  padding: 1%;
  margin: 1% 10%;
  height: 20px;
  border-radius: 0.5em;
  box-shadow: 0 0.1em 0.5em;
}
.list-inline {
  display: flex;
  justify-content: margin-around;
  width: 33.33%;
   list-style: none;
  padding: 0;
  margin: 0;
}
@keyframes Marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-66.6%); }
}
</style>
<body>
<h1> Example </h1>
<h2> Marquee Effect Using CSS </h2>
<div class="Marquee">
  <div class="Marqcont">
    <ul class="list-inline">
       <li> Menu 1</li>
       <li> Menu 2 </li>
       <li> Menu 3 </li>
       <li> Menu 4 </li>
       <li> Menu 5 </li>
    </ul>
    <ul class="list-inline">
       <li> Menu 1</li>
       <li> Menu 2 </li>
       <li> Menu 3 </li>
       <li> Menu 4 </li>
       <li> Menu 5 </li>
    </ul>
    <ul class = "list-inline">
       <li> Menu 1</li>
       <li> Menu 2 </li>
       <li> Menu 3 </li>
       <li> Menu 4 </li>
       <li> Menu 5 </li>
    </ul>
  </div>
</div>
</body>
</html>

说明

在上面的示例中，我们使用 CSS 创建了一个跑马灯效果的例子。在这个例子中，菜单以水平方向移动。

输出

以下是这个例子的输出。

下一主题SCSS 转换为 CSS

使用 CSS 制作 Marquee 效果

跑马灯是什么意思？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

使用 CSS 制作 Marquee 效果

跑马灯是什么意思？

示例 1

示例 2

示例 3

相关帖子

CSS Display Flex

CSS 的用途是什么

如何在表单的 input 元素内使用 CSS 添加图标

Free CSS Template

将 SCSS 转换为 CSS

CSS Beautifier

White Space

CSS ID Selector

CSS 中如何对齐图片

CSS 中如何定位图片

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器