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

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

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