水平滚动卡

下载代码

html

css

分享到微信朋友圈

html

<header class="page-header">
  <h1 class="page-header__title">Cards!</h1>
</header>
<section class="page-section">
  <h2 class="page-section__title">Hand-picked For You</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">Our Current Favorites</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">Community Selections</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">Recently Viewed</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">Hidden Gems</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">These Are Fine</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>
<section class="page-section">
  <h2 class="page-section__title">Garbage. Total Garbage.</h2>
  <div class="cards">
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
    <div class="card">
      <div class="card__image"></div>
      <div class="card__content">
        <div class="card__title"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
        <div class="card__line"></div>
      </div>
    </div>
  </div>
</section>

css

:root {
  --space: 2rem;
  --radius: 0.15rem;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background-color: #1f1f1f;
  color: #e6e6e6;
  font-family: "Helvetica Neue", sans-serif;
}

.page-header {
  margin: calc(var(--space) * 4) 0;
  padding: 0 var(--space);
}

.page-header__title {
  margin: 0;
  font-size: clamp(3rem, 10vw, 6rem);
}

.page-section {
  overflow: hidden;
  margin: calc(var(--space) * 4) 0;
}

.page-section__title {
  margin: calc(var(--space) / 2) 0;
  padding: 0 var(--space);
  font-size: clamp(2rem, 5vw, 3rem);
  opacity: 0;
  transform: translateX(-100%);
}

.cards {
  display: flex;
  width: 100%;
  padding: var(--space);
  overflow: scroll;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.cards::-webkit-scrollbar {
  width: 0 !important;
  display: none;
}
.cards > * + * {
  margin-left: var(--space);
}
.cards::after {
  content: "";
  display: block;
  flex: 0 0 var(--space);
}

.card {
  flex: 1 0 auto;
  width: 100%;
  max-width: 250px;
  opacity: 0;
  background-color: #e6e6e6;
  border-radius: var(--radius);
  overflow: hidden;
  transform: translateX(400px);
}

.card__image {
  width: 100%;
  background-color: #70c2b4;
}
.card__image::before {
  content: "";
  display: block;
  padding-bottom: calc(100% / (16 / 9));
}

.card__content {
  padding: var(--space);
}

.card__title {
  margin-bottom: calc(var(--space) / 2);
  width: 70%;
  height: 24px;
  border-radius: var(--radius);
  background-color: #f25c5a;
}

.card__line {
  height: 12px;
  background-color: #24799e;
  border-radius: var(--radius);
}
.card__line + .card__line {
  margin-top: calc(var(--space) / 4);
}
.card__line:last-child {
  width: 60%;
}

JavaScript

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg