css+div实现图文卡片幻灯片效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：css+div实现图文卡片幻灯片效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@layer reset, base, utilities, components, layout, overrides;
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
@layer reset {
  *,
  ::before,
  ::after {
    box-sizing: border-box;
  }

  :where(:not(dialog)) {
    margin: 0;
  }

  :where(html) {
    -webkit-text-size-adjust: none;

    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  :where(body) {
    min-block-size: 100svb;
    -webkit-font-smoothing: antialiased;
  }
}

@layer base {
  html {
    --placeholder-font: 'Inter';
    --arrow-icon: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="%234428c2"><path d="M647-440H160v-80h487L423-744l57-56 320 320-320 320-57-56 224-224Z"/></svg>');
    --caption: 400 0.688rem/1rem var(--placeholder-font), system-ui, sans-serif;
    --headline: 600 2.812rem/3.25rem var(--placeholder-font), Arial, sans-serif;
    --headline-small: 600 2rem / 2.5rem var(--placeholder-font), system-ui, sans-serif;
    --label: 600 1rem / 1.375rem var(--placeholder-font), system-ui, sans-serif;
    --title: 600 1.75rem/2.25rem var(--placeholder-font), system-ui, sans-serif;
    --title-small: 600 1.5rem/2rem var(--placeholder-font), Arial, sans-serif;

    --surface: oklch(96% 0 236);
    --on-surface: oklch(0% 0 0);

    --primary: oklch(91% 0.18 99);
    --on-primary: oklch(0% 0 0);

    --secondary: oklch(43% 0.22 280);
    --on-secondary: oklch(100% 0 0);

    --surface-container: oklch(91% 0.03 64);
    --on-surface-container: oklch(0% 0 0);

    --shadow-02: 0px 1px 2px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
    --shadow-04: 0px 2px 4px rgba(0, 0, 0, 0.14), 0px 0px 2px rgba(0, 0, 0, 0.12);
  }
}

@layer layout {
  .section {
    --duration: 0;
    --img-translate-delay: 0;

    background-color: var(--surface);
    color: var(--on-surface);
    padding-block: 64px;
    font: var(--body);

    /* motionOK */
    @media (prefers-reduced-motion: no-preference) {
      --duration: 200ms;
      --img-translate-delay: 250ms;
    }
  }
  .section-wrapper {
    container-type: inline-size;
    background-color: var(--secondary);
    color: var(--on-secondary);
    display: block;
    border-start-end-radius: 128px;
    overflow: clip;
    padding-block: 32px;
    padding-block-end: 128px;

    /* md-n-above */
    @media (width >= 768px) {
      padding-block-end: 160px;
    }
  }
  .header {
    padding-block: 32px;
    display: grid;
    place-items: center;
    padding-inline: 16px;
    /* md-n-above */
    @media (width >= 768px) {
      padding-block: 64px;
    }
  }
  .headline {
    text-align: center;
    text-wrap: pretty;
    font: var(--headline-small);

    /* md-n-above */
    @media (width >= 768px) {
      font: var(--headline);
    }
  }
  .cards {
    list-style: none;
    display: grid;
    grid-auto-flow: column;
    place-items: start;
    padding-block: 32px;
    padding-inline: 48px;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    /* motionOK */
    @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
    }
  }

  .card {
    --card-circle-bg: var(--on-secondary);
    background-color: var(--surface-container);
    color: var(--on-surface-container);
    border-radius: 1rem;
    overflow: clip;
  }

  .card-even {
    --card-circle-bg: var(--secondary);
    background-color: var(--surface);
    color: var(--on-surface);
  }

  .article {
    container-type: size;
    display: grid;
    padding-inline: 32px;
    padding-block-start: 32px;
    gap: 16px;
    inline-size: min(90cqi, 348px);
    aspect-ratio: 3/4;
    grid-template-rows: 1fr 1fr;
  }
  .card-header {
    display: grid;
    gap: 12px;
  }
  .hgroup {
    display: grid;
    gap: 16px;
  }
  .category {
    font: var(--caption);
    text-transform: uppercase;
    letter-spacing: 2px;
  }
  .title {
    font: var(--title-small);
    /* md-n-above */
    @media (width >= 768px) {
      font: var(--title);
    }
  }
  .link {
    --_x: 0px;
    display: flex;
    inline-size: fit-content;
    block-size: 40px;
    background-color: var(--primary);
    align-items: center;
    gap: 8px;
    padding-inline-start: 16px;
    text-decoration: none;
    color: var(--on-primary);
    font: var(--label);
    border-radius: 100px;
    box-shadow: var(--shadow-02);

    &:hover {
      --_x: 3px;
    }
  }
  .icon {
    --_primary-darker: oklch(from var(--primary) calc(l - 0.08) c h);
    background-color: var(--_primary-darker);
    block-size: 100%;
    display: grid;
    a.........完整代码请登录后点击上方下载按钮下载查看