双层文字扫光效果

吉吉安2026-01-29 9:12
文字扫光效果
html 复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>Animated Shiny Text -- Correct</title>

<style>
  body {
    margin: 0;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0b0b0b;
    font-family: system-ui, -apple-system, BlinkMacSystemFont;
  }

  .shiny-wrapper {
    position: relative;
    font-size: 64px;
    font-weight: 700;
    line-height: 1.2;
  }

  /* 底层文字（永远可见） */
  .shiny-base {
    color: rgba(229, 231, 235, 0.7);
  }

  /* 上层扫光 */
  .shiny-overlay {
    position: absolute;
    inset: 0;
    color: transparent;

    background-image: linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.9),
      transparent
    );
    background-repeat: no-repeat;
    background-size: 120px 100%;
    background-position: 0 0;

    -webkit-background-clip: text;
    background-clip: text;

    animation: shine 1.5s linear infinite;
    pointer-events: none;
  }

  @keyframes shine {
  from {
    background-position: -120% 0;
  }
  to {
    background-position: 220% 0;
  }
}
</style>
</head>

<body>

<div class="shiny-wrapper">
  <span class="shiny-base">Animate</span>
  <span class="shiny-overlay">Animate</span>
</div>

</body>
</html>