Pure CSS to achieve the marquee effect

Original article: Pure CSS to achieve the marquee effect

See the effect first

I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js. I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js.

`<marquee>` tag

At this time, some front-end bosses will stand up and say, isn’t this just a matter of <marquee> tag? However, this element has been abandoned. Although it can still be used, it may be removed by mainstream browsers one day. It is better to use it less The marquee has been removed

Use CSS animation

Apply animation to text

Since the marquee simply scrolls the text horizontally, we can use CSS animation to achieve it. Let’s set a piece of text first, and then apply animation to it.

I am a personal intern who has been practicing the market for two and a half years. I like html, css, and js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16


<div class="marquee-1">
<span>I am a personal intern who has been practicing the market for two and a half years. I like html, css, and js. </span>
</div>
<style>
.marquee-1 {
overflow: hidden;
width: 300px;
display: flex;
}
.marquee-1 span {
animation: marquee 10s linear infinite;
}
@keyframes marquee {
100% {transform: translateX(-100%);}
}
</style>

It looks like the text wraps after it exceeds the container.

Force the text to not wrap

Then we force the text to not wrap. See the effect

I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div class="marquee-2">
  <span>I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js. </span>
</div>
<style>
.marquee-2 {
  overflow: hidden;
  /* You can force the text not to wrap here */
  white-space: nowrap;
  width: 300px;
  display: flex;
}
.marquee-2 span {
  animation: marquee 10s linear infinite;
}
@keyframes marquee {
  100% {transform: translateX(-100%);}
}
</style>

Now it looks a bit interesting, that is, the text will not start to scroll again until it is completely scrolled.

Copy an element to achieve seamless scrolling

We can copy an element and then let the animation run at the same time, so that it looks like seamless scrolling. The complete code is below.

I am a personal intern who has been practicing marketing for two and a half years. I like html, css, and js. I am a personal intern who has been practicing the market for two and a half years. I like html, css, and js.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18


<div class="marquee">
  <span>I am a personal intern who has been practicing the market for two and a half years. I like html, css, and js. </span>
  <span>I am a personal intern who has been practicing the market for two and a half years. I like html, css, and js. </span>
</div>
<style>
.marquee{
  overflow: hidden;
  white-space: nowrap;
  width: 400px;
  display: flex;
}
.marquee span{
  animation: marquee 10s linear infinite;
}
@keyframes marquee{
  100% {transform: translateX(-100%);}
}
</style>

marquee: marquee element
white-space