css实现4种滚动驱动全屏幻灯片切换效果代码-html代码-BFW代码库

代码语言：html

所属分类：幻灯片

代码描述：css实现4种滚动驱动全屏幻灯片切换效果代码，没有使用js。

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

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

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

  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..400;1,9..144,100..400&family=Noto+Sans+Display:wght@200..700&display=swap" rel="stylesheet">
  

<style>
@layer base, rhythm, layout, components, default, overwrites;

@layer base {
  :root {
    /*
    * Fonts and text
    */
    --font-family-default: 'Noto Sans Display', Inter, Roboto, 'Helvetica Neue', 'Arial Nova', 'Nimbus Sans', Arial, sans-serif;
    --font-family-heading: 'Fraunces', Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
    --font-family-monospace: 'Nimbus Mono PS', 'Courier New', monospace;

    --max-content-width: 100rem;
    --max-reading-measure: 50ch;
    --min-tap-size: 48px;
    --min-tap-space: 8px;

    /*
    * Colors
    */
    --color-background: #000;
    --color-text: #fff0f4;
    --color-primary: oklch(74% 0.15 32);
    --color-secondary: oklch(65% 0.13 210);
    --color-ui: oklch(65% 0.05 210);

    --color-yellow: oklch(80% 0.16 85);
    --color-green: oklch(60% 0.16 135);
    --color-red: oklch(65% 0.18 15);
    --color-green-2: oklch(54% 0.11 164);
    --color-purple: oklch(62% 0.15 318);
    --color-red-2: oklch(57% 0.2 15);

    --color-link: var(--color-primary);
    --color-link-hover: var(--color-secondary);
  }
}

@layer rhythm {
  body {
    --font-size-min: 16;
    --font-size-max: 20;

    --line-height-min: 1.2;
    --line-height-max: 1.6;

    --font-size-default: var(--font-size);
    --line-height-default: var(--line-height);

    /*
    * Spacing / rhythm
    */
    --spacing: var(--RHYTHM);

    /* 
      Useful heading scales
      Golden Ratio: 1.618
      Minor Sixth: 1.6
      Perfect Fifth: 1.5
      Augmented Fourth: 1.414
      Perfect Fourth: 1.333
      Major Third: 1.25
      Minor Third: 1.2
      Major Second: 1.125
      Minor Second: 1.067

      Once CSS pow() is supported, we can use the following formula to create a scale:
      --min-font-size: pow(var(--base-font-size-min) * var(--min-heading-scale)), var(--heading-level));
      --max-font-size: pow(var(--base-font-size-max) * var(--max-heading-scale)), var(--heading-level));
    */

    --pl: 1.125;
    --pu: 1.6;

    --s1-min: calc(var(--base-font-size-min) / var(--pl));
    --s1-max: calc(var(--base-font-size-max) / var(--pu));

    --h6-min: var(--base-font-size-min);
    --h6-max: var(--base-font-size-max);

    --h5-min: calc(var(--base-font-size-min) * var(--pl));
    --h5-max: calc(var(--base-font-size-max) * var(--pu));

    --h4-min: calc(var(--h5-min) * var(--pl));
    --h4-max: calc(var(--h5-max) * var(--pu));

    --h3-min: calc(var(--h4-min) * var(--pl));
    --h3-max: calc(var(--h4-max) * var(--pu));

    --h2-min: calc(var(--h3-min) * var(--pl));
    --h2-max: calc(var(--h3-max) * var(--pu));

    --h1-min: calc(var(--h2-min) * var(--pl));
    --h1-max: calc(var(--h2-max) * var(--pu));
  }

  h1,
  h2 {
    --line-height-min: 1.25;
    --line-height-max: 1;

    font-size: var(--font-size);
    font-weight: 200;
    line-height: var(--line-height);
    padding-block: calc(var(--grid-correction, 0) / 2);
  }

  h2 {
    --font-size-min: var(--h2-min);
    --font-size-max: var(--h2-max);
  }
}

@layer base {
  :root {
    -webkit-text-size-adjust: 100%;

    box-sizing: border-box;
    overflow-wrap: break-word;
  }

  *,
  ::before,
  ::after {
    background-repeat: no-repeat;
    box-sizing: inherit;
  }

  /* Prevent text-shadows making highlighted text unreadable */
  ::-moz-selection {
    background-color: highlight;
    color: highlightText;
    text-shadow: none !important;
  }
  ::selection {
    background-color: highlight;
    color: highlightText;
    text-shadow: none !important;
  }

  html {
    height: 100%;
    scroll-behavior: smooth;
    overflow-x: hidden;
  }

  body {
    background-color: var(--color-background, white);
    color: var(--color-text, black);
    font-family: var(--font-family-default, sans-serif);
    font-size: var(--font-size-default, 1em);
    font-size-adjust: from-font;
    line-height: var(--line-height-default, 1.5);
    text-rendering: optimizeLegibility;
    margin: 0;
    min-height: 100%;
  }

  main {
    outline: 0;
  }

  a {
    color: var(--color-link, blue);
    transition: 0.25s ease-in-out;

    &:hover,
    &:focus {
      color: var(--color-link-hover, var(--color-link, blue));
    }
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-family: var(--font-family-heading, var(--font-family-default, 1rem));
    line-height: var(--line-height-heading, 1.25);
    font-weight: 400;
    -webkit-margin-before: calc(var(--margin-heading-start, var(--spacing, 1.5rem) * 2));
            margin-block-start: calc(var(--margin-heading-start, var(--spacing, 1.5rem) * 2));
    -webkit-margin-after: var(--margin-heading-end, var(--spacing, 1.5rem));
            margin-block-end: var(--margin-heading-end, var(--spacing, 1.5rem));
  }

  /* Limit width of objects with intrinsic size */
  img,
  picture,
  object,
  video,
  embed,
  iframe {
    max-width: 100%;
    height: auto;
  }
}
@layer rhythm {
  /*
    Responsive typography with vertical rhy.........完整代码请登录后点击上方下载按钮下载查看