Example code for implementing a text marquee with CSS3

Background

Here's what happened, Luzhu accidentally learned about a mobile phone with the best external speaker in the universe! ! ! I took advantage of the 618 sale and bought one on impulse. After all, Luzhu is a real electronics enthusiast! ! ! But when Luzhu checked the logistics information. . . . . .

Well, my damn desire to explore has attracted my attention to this abrupt marquee (ca, it looks like I won’t receive any goods today!!!)

Let’s talk about how to achieve it (this joke is so hard to connect)

Rendering

Logical Description

The p tag contains two span tags (prompt text), two spans are required, or more than 2, to position the p tag. Change the left value of the p tag to move it to the end of the first span tag. See the picture! ! ! When the second span reaches the starting position, the second movement will be cycled and connected seamlessly.

Whether it is PC or mobile, of course, the revolving lantern will definitely appear more often on mobile devices. According to the design draft, the UI will give you the specific width of the span label text, so: movement distance = span width + blank space between two spans - left value of the left red area

Code Implementation

HTML part:

 <div id="app">
    <div class="top">
      <p>
        <span class="tips">Due to the surge in order volume during the promotion period, the delivery of your order may be delayed. Please be patient~</span>
        <span>Due to the surge in order volume during the promotion period, the delivery of your order may be delayed. Please be patient~</span>
      </p>
    </div>
    <div class="main">
      <h6>Then here is the stew</h6>
      <h4>External speaker is the best in mobile phones</h4>
      <h2>The most invincible in the universe</h2>
      <h6>Xiaomi 10 Pro</h6>
      <h2>I don't accept arguments</h2>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
      <h3>·</h3>
    </div>
  </div>

CSS part:

.tips{
      width: 560px;
    }
    p{
      position: absolute;
      height: 34px;
      left: 34px;
      white-space: nowrap;
      display: flex;
      animation: move linear 12s infinite;
      animation-delay:3s;
    }
    @keyframes move {
      0%{ left: 34px; }
      100%{ left: -526px; }
    }
    /* Please ignore the following, the focus is on the above*/
    *{margin: 0; padding: 0;}
    body,html{height: 100%;}
    #app{
      height: 100%;
      background:#ececec;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
    }
    .main{
      flex: 1;
    }
    .top{
      position: relative;
      overflow: hidden;
      height: 34px;
      background: #fff;
    }
    .top span{
      line-height: 34px;
      display: inline-block;
    }
    .top::before{
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 34px;
      z-index: 9;
      background-image: linear-gradient(90deg,#f00 0%, #f00 60%, transparent 100%);
    }
    .top::after{
      content: "";
      position: absolute;
      right: 0;
      top: 0;
      height: 100%;
      width: 34px;
      z-index: 9;
      background-image: linear-gradient(-90deg,#f00 0%, #f00 60%, transparent 100%);
    }
    h1,h2,h3,h4,h5,h6{
      margin: 20px auto;
      text-align: center;
    }

Personal summary

The Luzhu project involves a marquee, and a relatively lazy method is used in the Luzhu project, which is to use the marquee tag. This has a built-in marquee effect! ! ! This tag is very powerful. One tag can solve the problem of writing a lot of css or js. So why should I go around in such a big circle?

First of all, it can't achieve the beginning and the end connection like I do! ! !

Secondly, the official website describes this tag as follows: This feature is obsolete. Although it may still work in some browsers, its use is discouraged since it could be removed at any time. Try to avoid using it.

Ahem~ Considering those who are not good at English, the translation is: The element is outdated, please do not use it anymore. Although some browsers still support it, it is not required. Also, using this element is basically one of the worst things you can do to your users, so please don't do it.

So, choose the braised one. etc! When the screen width is enough to fit the prompt, there should be no movement. This can be controlled by js. Just treat it as homework!

This concludes the article about the sample code for implementing a text marquee with CSS3. For more information about CSS3 text marquee with CSS3, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!