bluesky 的知识库

Appearance

当前页导航

工作中常用方法 CSS 篇 ​

实现音乐歌词文字逐渐变化效果 ​

从左往右填充文字颜色

html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      @keyframes scan {
        0% {
          background-size: 0 100%;
        }
        100% {
          background-size: 100% 100%;
        }
      }
      .list_box {
        width: 100px;
        margin: 50px auto;
        border: 1px solid #333;
      }
      .list {
        margin-bottom: 15px;
      }
      .list .text {
        background: #7e7e7e -webkit-linear-gradient(left, red, red) no-repeat 0 0;
        -webkit-text-fill-color: transparent;
        -webkit-background-clip: text;
        background-size: 0 100%;
      }
      .list .text.load {
        animation: scan 2s linear;
      }
    </style>
  </head>

  <body>
    <div class="list_box">
      <p class="list"><span class="text load">从左往右填充文字颜色</span></p>
    </div>
  </body>
</html>