彩虹扫描文本

发布时间 2026-01-16 10:47:11
阅读量加载中...
此演示仅在桌面端浏览器中可用
     html
    
  
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>wanglei.live</title>
    <style>
      .box {
        display: flex;
        justify-content: center;
        align-items: center;
        width: 50%;
        margin: 10px auto;
      }

      h1 {
        position: relative;
        font-size: 100px;
        color: #292929;
      }

      h1::after {
        position: absolute;
        top: 0;
        left: 0;
        content: "WANGLEI.LIVE";
        color: transparent;
        background: linear-gradient(
          to right,
          #ff69b3,
          #fe0000,
          #ffa401,
          #008102,
          #40e1d2,
          #410898,
          #9400d4
        );
        background-clip: text;

        -webkit-clip-path: circle(50px at 100% 50%);
        clip-path: circle(50px at 100% 50%);

        animation: move 5s linear infinite;
      }

      @keyframes move {
        0% {
          -webkit-clip-path: circle(50px at 0% 50%);
          clip-path: circle(50px at 0% 50%);
        }

        50% {
          -webkit-clip-path: circle(50px at 100% 50%);
          clip-path: circle(50px at 100% 50%);
        }

        100% {
          -webkit-clip-path: circle(50px at 0% 50%);
          clip-path: circle(50px at 0% 50%);
        }
      }
    </style>
  </head>
  <body>
    <div class="box">
      <h1>WANGLEI.LIVE</h1>
    </div>
  </body>
</html>
#裁剪 #动画 #After伪元素