css超简单实现文字卡拉OK、跑马灯效果

啥也不说，先上效果图

实现方式 background-clip: text

再text上面再放一个绝对定位的相同的文字，使用 text 属性将红色背景裁剪到文字上就可以。

组件具体代码

<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>
复制代码

.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%;
  }
}
复制代码