css自适应滚动列表布局

下载代码

html

css

分享到微信朋友圈

html

<div class="horizontal-friends-list">
    <figure>
      <picture>
        <img src="https://picsum.photos/id/237/87/87">
      </picture>
      <figcaption>stolinksi</figcaption>
    </figure>
    <figure>
      <picture>
        <img src="https://picsum.photos/id/238/87/87">
      </picture>
      <figcaption>henrihelvetica</figcaption>
    </figure>
    <figure>
      <picture>
        <img src="https://picsum.photos/id/239/87/87">
      </picture>
      <figcaption>sierra.argyle.art</figcaption>
    </figure>
    <figure>
      <picture>
        <img src="https://picsum.photos/id/240/87/87">
      </picture>
      <figcaption>szynszyliszys</figcaption>
    </figure>
    <figure>
      <picture>
       <img src="https://picsum.photos/id/241/87/87">
      </picture>
      <figcaption>sarasoueidan</figcaption>
    </figure>
    <figure>
      <picture>
        <img src="https://picsum.photos/id/242/87/87">
      </picture>
      <figcaption>kosamari</figcaption>
    </figure>
    <figure>
      <picture>
        <img src="https://picsum.photos/id/243/87/87">
      </picture>
      <figcaption>wesbos</figcaption>
    </figure>
    <figure>
      <picture>
       <img src="https://picsum.photos/id/244/87/87">
      </picture>
      <figcaption>paullewis</figcaption>
    </figure>
  </div>

</section>

css

:root {
  --surface1: hsl(0, 0%, 90%);
  --surface2: hsl(0, 0%, 100%);

--text1: hsl(0, 0%, 20%);
}

html {
  height: 100%;
  width: 100%;
}

body {
  min-height: 100%;
  min-width: 100%;
  box-sizing: border-box;
  margin: 0;
  padding: 2rem;

display: grid;
  align-content: center;
  -webkit-box-pack: center;
          justify-content: center;
  place-content: center;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif;
  background-color: #1F1F1F;
  color: hsl(0, 0%, 20%);
  color: var(--text1);
}

.overflow-x {
  overflow-x: auto;
  overscroll-behavior-x: contain;

border: 1px solid hsl(0, 0%, 80%);
  border-radius: 1ex;
  background-color: hsl(0, 0%, 100%);
  background-color: var(--surface2);
  padding: 2rem;
}

.horizontal-friends-list {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 10ch;
  grid-gap: 2rem;
  gap: 2rem
}

.horizontal-friends-list > figure {
    display: grid;
    grid-gap: 1ex;
    gap: 1ex;
    margin: 0;
    text-align: center;
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-transition: -webkit-transform .2s ease-in-out;
    transition: -webkit-transform .2s ease-in-out;
    transition: transform .2s ease-in-out;
    transition: transform .2s ease-in-out, -webkit-transform .2s ease-in-out
  }

.horizontal-friends-list > figure:hover {
      -webkit-transform: scale(1.1);
              transform: scale(1.1);
    }

[dir="ltr"] .horizontal-friends-list > figure:last-child::after {
      bottom: -2rem;
      right: -2rem;
}

[dir="rtl"] .horizontal-friends-list > figure:last-child::after {
      bottom: -2rem;
      left: -2rem;
}

.horizontal-friends-list > figure:last-child::after {
      content: "";
      position: absolute;
      width: 2rem;
      height: 100%;
    }

.horizontal-friends-list > figure > picture {
      display: inline-block;
      width: 10ch;
      height: 10ch;
      border-radius: 50%;

background: 
        radial-gradient(hsla(0, 0%, 0%, 0.15) 60%, transparent 0),
        radial-gradient(white 65%, transparent 0),
        -webkit-gradient(linear, left bottom, right top, from(orange), to(deeppink));

background: 
        radial-gradient(hsla(0, 0%, 0%, 0.15) 60%, transparent 0),
        radial-gradient(white 65%, transparent 0),
        linear-gradient(to top right, orange, deeppink)
    }

.horizontal-friends-list > figure > picture > img {
        display: block;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        -webkit-clip-path: circle(42%);
                clip-path: circle(42%);
      }

.horizontal-friends-list > figure > figcaption {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      font-weight: 500;
    }

JavaScript

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