CSS super simple text karaoke, running lantern effect

Don’t say anything. Let’s start with the renderings

Background-clip: text

Use the text property to crop the red background onto the text.

Component-specific code

<view class="oneText">
  <text class="text">{{text}}</text>
  <view class="copyText">
    <text class="inner" style="animation-duration: {{duration}}s; animation-iteration-count: {{infinite ? 'infinite' : 1}};">{{text}}</text>
  </view>
</view>
Copy the code

.oneText {
  position: relative;
}
.copyText {
  top: 0;
  left: 0;
  position: absolute;
}
.inner {
  color: transparent;
  background: linear-gradient(to right, red, red);
  -webkit-background-clip: text;
  background-repeat: no-repeat;
  animation: landIn 20s linear normal;
  background-size: 0% 100%;
  animation-duration: 5s;
  /* background-size: 0% 100%; * /
  /* transition: all 10s linear; * /
}
@keyframes landIn {
  0% {
      background-size: 0 100%;
  }
  100% {
      background-size: 100% 100%; }}Copy the code