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

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

代码语言：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 {
.........完整代码请登录后点击上方下载按钮下载查看