萧寂

Appearance

左右渐隐渐现跑马灯效果 ​
html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Demo</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      min-height: 100vh;
      background: #faf9f7;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 40px 20px;
      color: #333;
    }

    h1 {
      font-size: 32px;
      font-weight: 600;
      margin-bottom: 12px;
      text-align: center;
    }

    p.subtitle {
      color: #666;
      margin-bottom: 48px;
      text-align: center;
      line-height: 1.6;
    }

    .section-title {
      width: 100%;
      max-width: 900px;
      font-size: 14px;
      color: #888;
      margin-bottom: 12px;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    /* ========== 核心效果：边缘渐隐 + 横向滚动 ========== */
    .logo-banner {
      position: relative;
      width: 100%;
      max-width: 900px;
      overflow: hidden;
      /* 背景色必须和页面一致，渐变才能“融进去” */
      background: #faf9f7;
      padding: 16px 0;
      margin-bottom: 48px;
    }

    /* 左侧渐隐遮罩 */
    .logo-banner::before,
    .logo-banner::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 80px;
      z-index: 2;
      pointer-events: none;
    }

    .logo-banner::before {
      left: 0;
      background: linear-gradient(to right, #faf9f7 0%, transparent 100%);
    }

    .logo-banner::after {
      right: 0;
      background: linear-gradient(to left, #faf9f7 0%, transparent 100%);
    }

    .logo-track {
      display: flex;
      align-items: center;
      gap: 32px;
      width: max-content;
      animation: scroll 24s linear infinite;
    }

    .logo-track:hover {
      animation-play-state: paused;
    }

    .logo-item {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 15px;
      color: #555;
      white-space: nowrap;
      flex-shrink: 0;
    }

    .logo-item svg {
      width: 20px;
      height: 20px;
      flex-shrink: 0;
    }

    @keyframes scroll {
      0% {
        transform: translateX(0);
      }
      100% {
        transform: translateX(-50%);
      }
    }

    /* ========== 方案二：纯静态渐隐（不滚动） ========== */
    .static-banner {
      position: relative;
      width: 100%;
      max-width: 900px;
      overflow: hidden;
      background: #faf9f7;
      padding: 16px 0;
      margin-bottom: 48px;
    }

    .static-banner::before,
    .static-banner::after {
      content: "";
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100px;
      z-index: 2;
      pointer-events: none;
    }

    .static-banner::before {
      left: 0;
      background: linear-gradient(to right, #faf9f7 0%, transparent 100%);
    }

    .static-banner::after {
      right: 0;
      background: linear-gradient(to left, #faf9f7 0%, transparent 100%);
    }

    .static-track {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 32px;
      flex-wrap: nowrap;
    }

    /* ========== 方案三：CSS mask 方式（更现代） ========== */
    .mask-banner {
      position: relative;
      width: 100%;
      max-width: 900px;
      overflow: hidden;
      background: #faf9f7;
      padding: 16px 0;
      margin-bottom: 48px;
      -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 80px,
        black calc(100% - 80px),
        transparent 100%
      );
      mask-image: linear-gradient(
        to right,
        transparent 0%,
        black 80px,
        black calc(100% - 80px),
        transparent 100%
      );
    }

    .mask-track {
      display: flex;
      align-items: center;
      gap: 32px;
      width: max-content;
      animation: scroll 20s linear infinite;
    }

    /* 响应式：小屏幕减小遮罩宽度 */
    @media (max-width: 640px) {
      .logo-banner::before,
      .logo-banner::after,
      .static-banner::before,
      .static-banner::after {
        width: 40px;
      }

      .mask-banner {
        -webkit-mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 40px,
          black calc(100% - 40px),
          transparent 100%
        );
        mask-image: linear-gradient(
          to right,
          transparent 0%,
          black 40px,
          black calc(100% - 40px),
          transparent 100%
        );
      }
    }

    .note {
      max-width: 900px;
      background: #fff;
      border: 1px solid #eee;
      border-radius: 12px;
      padding: 20px;
      font-size: 14px;
      line-height: 1.8;
      color: #555;
    }

    .note code {
      background: #f4f4f4;
      padding: 2px 6px;
      border-radius: 4px;
      font-family: "SF Mono", Consolas, monospace;
      font-size: 12px;
    }
  </style>
</head>
<body>

  <div class="section-title">方案一：左右渐变遮罩 + 无限滚动（最接近截图）</div>
  <div class="logo-banner">
    <div class="logo-track">
      <!-- 第一组 -->
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#e0e0e0"/></svg>
        Qwen3.7-Plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#d0d0d0"/></svg>
        Qwen3.6-Plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#c0c0c0"/></svg>
        Qwen3.5-plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/></svg>
        Kimi-K2.7-Code
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#a0a0a0"/></svg>
        Kimi-K2.7-Code-Highspeed
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#909090"/></svg>
        Kimi-K2.6
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#808080"/></svg>
        Kimi-K2.5
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#707070"/></svg>
        Doubao-Seed-2.1-Pro
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#606060"/></svg>
        Doubao-Seed-2.1-Turbo
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#505050"/></svg>
        Doubao-Seed-2.0-Code
      </div>
      <!-- 复制一组实现无缝滚动 -->
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#e0e0e0"/></svg>
        Qwen3.7-Plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#d0d0d0"/></svg>
        Qwen3.6-Plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#c0c0c0"/></svg>
        Qwen3.5-plus
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/></svg>
        Kimi-K2.7-Code
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#a0a0a0"/></svg>
        Kimi-K2.7-Code-Highspeed
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#909090"/></svg>
        Kimi-K2.6
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#808080"/></svg>
        Kimi-K2.5
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#707070"/></svg>
        Doubao-Seed-2.1-Pro
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#606060"/></svg>
        Doubao-Seed-2.1-Turbo
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#505050"/></svg>
        Doubao-Seed-2.0-Code
      </div>
    </div>
  </div>

  <div class="section-title">方案二：纯静态渐隐（内容不滚动）</div>
  <div class="static-banner">
    <div class="static-track">
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/></svg>
        Kimi-K2.7-Code
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#a0a0a0"/></svg>
        Kimi-K2.7-Code-Highspeed
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#909090"/></svg>
        Kimi-K2.6
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#808080"/></svg>
        Kimi-K2.5
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#707070"/></svg>
        Doubao-Seed-2.1-Pro
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#606060"/></svg>
        Doubao-Seed-2.1-Turbo
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#505050"/></svg>
        Doubao-Seed-2.0-Code
      </div>
    </div>
  </div>

  <div class="section-title">方案三：CSS mask-image 实现（更现代，一行代码搞定遮罩）</div>
  <div class="mask-banner">
    <div class="mask-track">
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/></svg>
        Kimi-K2.7-Code
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#a0a0a0"/></svg>
        Kimi-K2.7-Code-Highspeed
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#909090"/></svg>
        Kimi-K2.6
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#808080"/></svg>
        Kimi-K2.5
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#707070"/></svg>
        Doubao-Seed-2.1-Pro
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#606060"/></svg>
        Doubao-Seed-2.1-Turbo
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#505050"/></svg>
        Doubao-Seed-2.0-Code
      </div>
      <!-- 复制一组 -->
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#b0b0b0"/></svg>
        Kimi-K2.7-Code
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#a0a0a0"/></svg>
        Kimi-K2.7-Code-Highspeed
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#909090"/></svg>
        Kimi-K2.6
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#808080"/></svg>
        Kimi-K2.5
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#707070"/></svg>
        Doubao-Seed-2.1-Pro
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#606060"/></svg>
        Doubao-Seed-2.1-Turbo
      </div>
      <div class="logo-item">
        <svg viewBox="0 0 24 24" fill="none"><circle cx="12" cy="12" r="10" fill="#505050"/></svg>
        Doubao-Seed-2.0-Code
      </div>
    </div>
  </div>

  <div class="note">
    <strong>实现要点：</strong><br>
    1. <code>overflow: hidden</code> 把超出容器的内容裁掉。<br>
    2. 左右各放一个 <code>::before</code> / <code>::after</code> 伪元素，背景用 <code>linear-gradient</code> 从背景色过渡到透明，形成“渐隐”。<br>
    3. 内部轨道 <code>display: flex; width: max-content;</code>，配合 <code>@keyframes scroll</code> 做无限横向滚动。<br>
    4. 要实现“无缝”滚动，需要把内容复制一份（首尾相接）。<br>
    5. 现代浏览器也可以直接用 <code>mask-image: linear-gradient(...)</code> 一行代码实现左右渐隐，兼容性要求 IE 的场景用伪元素方案。<br>
    6. 遮罩颜色必须和容器背景色一致，否则会出现生硬的色块。
  </div>

</body>
</html>

萧寂173专属博客，v1.0.0.4