open-props实现横向关注人物卡片点击滚动效果代码-html代码-BFW代码库

代码语言：html

代码描述：open-props实现横向关注人物卡片点击滚动效果代码，纯css实现，没有js代码。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
  
<style>
@import "//repo.bfw.wiki/bfwrepo/css/open-props.1.6.17.css" layer(design.system);
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@200..700&display=swap");
@import "//repo.bfw.wiki/bfwrepo/css/layout-craft.utilities.css"
  layer(base.utilities);
@layer base.reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }
  :where(:not(dialog)) {
    margin: 0;
    padding: 0;
  }
  :where(img, svg, video) {
    max-inline-size: 100%;
    block-size: auto;
    display: block;
  }
  :where(a) {
    text-decoration: unset;
    color: inherit;
    &:hover {
      text-decoration: underline;
    }
  }
  :where(ul) {
    list-style: none;
  }
  :where(button) {
    font-family: inherit;
    cursor: pointer;
    border: unset;
  }
}
@layer base.app {
  :root {
    font-family: "Inter", sans-serif;
    color-scheme: dark;
    --surface-1: oklch(0.17 0 0);
    --surface-2: oklch(0.24 0 0);
    --surface-3: oklch(0.46 0 0);
    --text-1: oklch(0.97 0 0);
    --text-2: oklch(0.57 0 0);
    --text-3: oklch(0.42 0 0);
    --custom-radios: 10px;
  }
  body {
    min-block-size: 100dvb;
    background-color: var(--surface-1);
    color: var(--text-1);
  }
}
@layer base.containers {
  main {
    --_content: 700px;
    padding-inline: var(--size-3);
  }
  section {
    position: relative;
    inline-size: 100%;
    border-block: var(--border-size-1) solid oklch(0.97 0 0 / 0.15);
    padding-block: var(--size-4);
    h2 {
      font-size: var(--font-size-1);
      font-weight: var(--font-weight-5);
    }
  }
}
@layer base.components {
  .UserList {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth; /* Hide scrollbar */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  .Card {
    scroll-snap-align: start;
    background-color: var(--surface-2);
    border-radius: var(--custom-radios);
    padding: var(--size-4);
    position: relative;
    inline-size: 186px;
    text-decoration: none;
    figcaption {
      --_gap: 0.2ex;
    }
    img {
      --size: 80px;
      block-size: var(--size);
      inline-size: var(--size);
      border-radius: var(--radius-round);
      background: var(--gradient-8);
    }
    .Name {
      font-size: var(--font-size-1);
      font-weight: var(--font-weight-6);
    }
    .Username {
      color: var(--text-2);
    }
    :is(.Name, .Username) {
      max-inline-size: 100%;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      &:hover {
        text-decoration: underline;
      }
    }
    .RemoveBtn {
      background: transparent;
      border: unset;
      border-radius: var(--radius-round);
      position: absolute;
      inset-inline-end: 0.75rem;
      inset-block-start: var(--size-2);
      cursor: pointer;
    }
    .FollowButton {
      font-size: var(--font-size-1);
      background-color: var(--text-1);
      color: var(--surface-1);
      font-weight: var(--font-weight-5);
      padding-inline: var(--size-5);
      border-radius: var(--custom-radios);
      padding-block: var(--size-2);
      inline-size: 100%;
    }
  }
  .Controls {
    position: fixed;
    inset-inline: 0;
    inset-block: calc(50% - var(--size-3));
    .Wrapper {
      --_content: 800px;
    }
    @media (width < 768px) {
      display: none;
    }
  }
  .ControlsBtn {
    inline-size: 44px;
    block-size: 44px;
    padding: 0.75rem;
    border-radius: var(--radius-round);
    background-color: var(--surface-2);
    color: var(--text-2);
    transition: scale 0.2s ease;
    &:hover {
      scale: 1.07;
    }
  }
}
@layer animation.scrollDriven {
  body {
    timeline-scope: --carousel;
  }
  .Scroller {
    scroll-timeline: --carousel inline;
  }
  .next {
    animation: auto next ease forwards;
    animation-timeline: --carousel;
  }
  .previous {
    animation: auto prev ease forwards;
    animation-timeline: --carousel;
  }
}
@keyframes prev {
  from {
    visibility: hidden;
  }
}
@keyframes next {
  to {
    visibility: hidden;
  }
}
</style>

  
</head>


  <body class="block-center-center">
  <main class="content-3">
    <section class="block gap-2">
      <h2>Suggested for you</h2>
      <div class="inline">
        <ul id="scroller" class="UserList Scroller inline gap-1">
          <li> <a href="#" class="Card block-center-center gap-2"> <button class="RemoveBtn"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path id="closeIcon" d="M8.00003 8.93334L4.73337 12.2C4.61114 12.3222 4.45559 12.3833 4.2667 12.3833C4.07781 12.3833 3.92225 12.3222 3.80003 12.2C3.67781 12.0778 3.6167 11.9222 3.6167 11.7333C3.6167 11.5444 3.67781 11.3889 3.80003 11.2667L7.0667 8L3.80003 4.73334C3.67781 4.61111 3.6167 4.45556 3.6167 4.26667C3.6167 4.07778 3.67781 3.92222 3.80003 3.8C3.92225 3.67778 4.07781 3.61667 4.2667 3.61667C4.45559 3.61667 4.61114 3.67778 4.73337 3.8L8.00003 7.06667L11.2667 3.8C11.3889 3.67778 11.5445 3.61667 11.7334 3.61667C11.9223 3.61667 12.0778 3.67778 12.2 3.8C12.3223 3.92222 12.3834 4.07778 12.3834 4.26667C12.3834 4.45556 12.3223 4.61111 12.2 4.73334L8.93337 8L12.2 11.2667C12.3223 11.3889 12.3834 11.5444 12.3834 11.7333C12.3834 11.9222 12.3223 12.0778 12.2 12.2C12.0778 12.3222 11.9223 12.3833 11.7334 12.3833C11.5445 12.3833 11.3889 12.3222 11.2667 12.2L8.00003 8.93334Z" fill="#777777" />
                </svg> </button>
              <figure class="block-center-center gap-2">
                <picture>
             <img src="//repo.bfw.wiki/bfwrepo/image/5e32405c2040e.png" alt="" width="80" height="80" />
                </picture>
                <figcaption class="block-center-center gap-1">
                  <div class="Name">Max Tailor</div>
                  <div class="Username">max_the_pawesome</div>
                </figcaption>
              </figure> <button class="FollowButton">Follow</button>
            </a> </li>
          <li> <a href="#" class="Card block-center-center gap-2"> <button class="RemoveBtn"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <use href="#closeIcon" />
                </svg> </button>
              <figure class="block-center-center gap-2">
                <picture>
                  <img src="//repo.bfw.wiki/bfwrepo/image/5e32407d9bd1a.png" alt="" width="80" height="80" />
                </picture>
                <figcaption class="block-center-center gap-1">
                  <div class="Name">Bella Barker</div>
                  <div class="Username">bella_barker_tailwagger</div>
                </figcaption>
              </figure> <button class="FollowButton">Follow</button>
            </a> </li>
          <li> <a href="#" class="Card block-center-center gap-2"> <button class="RemoveBtn"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <use href="#closeIcon" />
                </svg> </button>
              <figure class="block-center-center gap-2">
                <picture>
                <img src="//repo.bfw.wiki/bfwrepo/image/5e32409467029.png" alt="" width="80" height="80" />
                </picture>
                <figcaption class="block-center-center gap-1">
                  <div class="Name">Ruffington</div>
                  <div class="Username">rockstar_ruffington_rover</div>
                </figcaption>
              </figure> <button class="FollowButton">Follow</button>
            </a> </li>
          <li> <a href="#" class="Card block-center-center gap-2"> <button class="RemoveBtn"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <use href="#closeIcon" />
                </svg> </button>
              <figure class="block-center-center gap-2">
                <picture>
                 <img src="//repo.bfw.wiki/bfwrepo/image/5e3240ab7f831.png" alt="" width="80" height="80" />
                </picture>
                <figcaption class="block-center-center gap-1">
                  <div class="Name">Luna Lovetail</div>
                  <div class="Username">lunar_lovetail_lovebug</div>
                </figcaption>
              </figure> <button class="FollowButton">Follow</button>
            </a> </li>
          <li> <a href="#" class="Card block-center-center gap-2"> <button class="RemoveBtn"> <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path id="closeIcon" d="M8.00003 8.93334L4.73337 12.2C4.61114 12.3222 4.45559 12.3833 4.2667 12.3833C4.07781 12.3833 3.92225 12.3222 3.80003 12.2C3.67781 12.0778 3.6167 11.9222 3.6167 11.7333C3.6167 11.5444 3.67781 11.3889 3.80003 11.2667L7.0667 8L3.80003 4.73334C3.67781 4.61111 3.6167 4.45556 3.6167 4.26667C3.6167 4.07778 3.67781 3.92222 3.80003 3.8C3.92225 3.67778 4.07781 3.61667 4.2667 3.61667C4.45559 3.61667 4.61114 3.67778 4.73337 3.8L8.00003 7.06.........完整代码请登录后点击上方下载按钮下载查看