js+css实现页面滚动驱动齿轮转动动画效果代码-html代码-BFW代码库

代码语言：html

代码描述：js+css实现页面滚动驱动齿轮转动动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Gloria+Hallelujah&display=swap');


@layer normalize, base, demo;

@layer demo {
  body {
    height: 500vh;
  }

  html {
    color-scheme: light dark;
  }

  [data-theme='light'] {
    color-scheme: light only;
  }

  [data-theme='dark'] {
    color-scheme: dark only;
  }

  .arrow {
    position: fixed;
    left: 9rem;
    top: 12rem;
    width: 70px;
    z-index: 9999;
  }

  .arrow svg {
    width: 70px;
    scale: -1 1;
  }

  .arrow label {
    font-family: 'Gloria Hallelujah', cursive;
    position: absolute;
    left: 110%;
    top: 50%;
  }

  h1 {
    --font-level: 5;
    position: fixed;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    margin: 0;
    white-space: nowrap;
  }

  .gears {
    width: 100px;
    aspect-ratio: 1 / 2;
    position: fixed;
    top: 5.5rem;
    left: 1.5rem;
    container-type: inline-size;
  }

  .gears__box {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background: light-dark(hsl(0 0% 15%), hsl(0 0% 0%));
  }

  .gears::before {
    content: '';
    position: absolute;
    inset: -10px;
    z-index: -1;
    background: radial-gradient(
          circle at center,
          light-dark(hsl(0 0% 75%), hsl(0 0% 50%)) 2px,
          transparent 2px
        )
        50% 50% / 54px 52px,
      color-mix(in lch, canvas, hsl(0 0% 100% / 0.2));
  }

  .gears::after {
    content: '';
    position: absolute;
    inset: 0;
    background: hsl(0 0% 100% / 0.2);
    -webkit-mask: linear-gradient(
      135deg,
      #0000 30%,
      #000 20% 40%,
      #0000 40% 45%,
      #000 45% 50%,
      #0000 50%
    );
            mask: linear-gradient(
      135deg,
      #0000 30%,
      #000 20% 40%,
      #0000 40% 45%,
      #000 45% 50%,
      #0000 50%
    );
    -webkit-backdrop-filter: blur(1px);
            backdrop-filter: blur(1px);
  }

  .gears svg path {
    stroke: light-dark(hsl(0 0% 75%), hsl(0 0% 50%));
  }

  .gears svg {
    position: absolute;
    -webkit-animation: rotate linear both;
            animation: rotate linear both;
    animation-timeline: scroll(root);
    --rotation: 720;
    aspect-ratio: 1;
  }

  .gears svg:nth-of-type(1) {
    width: 150cqi;
    left: 0;
    top: 0;
    translate: -50% -50%;
    --turn: calc(var(--rotation) * (10 / 16) * -1deg);
    color: hsl(0 0% 35%);
  }
  .gears svg:nth-of-type(2) {
    width: calc(150cqi * (5 / 8));
    translate: 42% 42%;
    top: 0;
    left: 0;
    rotate: 8deg;
    --turn: calc(var(--rotation) * 1deg);
    color: hsl(0 0% 45%);
  }
  .gears svg:nth-of-type(3) {
    width: 150cqi;
    top: 50%;
    left: 0;
    rotate: 2deg;
    translate: -42% 2%;
    --turn: calc(var(--rotation) * (10 / 16) * -1deg);
    color: hsl(0 0% 40%);
  }
  .gears svg:nth-of-type(4) {
    display: none;
  }

  @-webkit-keyframes rotate {
    to {
      transform: rotate(var(--turn, 360deg));
    }
  }

  @keyframes rotate {
    to {
      transform: rotate(var(--turn, 360deg));
    }
  }
}

@layer base {
  :root {
    --font-size-min: 16;
    --font-size-max: 20;
    --font-ratio-min: 1.2;
    --font-ratio-max: 1.33;
    --font-width-min: 375;
    --font-width-max: 1500;
  }

  :where(.fluid) {
    --fluid-min: calc(
      var(--font-size-min) * pow(var(--font-ratio-min), var(--font-level, 0))
    );
    --fluid-max: calc(
      var(--font-size-max) * pow(var(--font-ratio-max), var(--font-level, 0))
    );
    --fluid-preferred: calc(
      (var(--fluid-max) - var(--fluid-min)) /
        (var(--font-width-max) - var(--font-width-min))
    );
    --fluid-type: clamp(
      (var(--fluid-min) / 16) * 1rem,
      ((var(--fluid-min) / 16) * 1rem) -
        (((var(--fluid-preferred) * var(--font-width-min)) / 16) * 1rem) +
        (var(--fluid-preferred) * var(--variable-unit, 100vi)),
      (var(--fluid-max) / 16) * 1rem
    );
    font-size: var(--fluid-type);
  }

  *,
  *:after,
  *:before {
    box-sizing: border-box;
  }

  body {
    display: grid;
    place-items: center;
    min-height: 100vh;
    font-family: 'SF Pro Text', 'SF Pro Icons', 'AOS Icons', 'Helvetica Neue',
      Helvetica, Arial, sans-serif, system-ui;
  }

  body::before {
    --size: 45px;
    --line: color-mix(in lch, canvasText, transparent 70%);
    content: '';
    height: 100vh;
    width: 100vw;
    position: fixed;
    background: linear-gradient(
          90deg,
          var(--line) 1px,
          transparent 1px var(--size)
        )
        50% 50% / var(--size) var(--size),
      linear-gradient(var(--line) 1px, transparent 1px var(--size)) 50% 50% /
        var(--size) var(--size);
    -webkit-mask: linear-gradient(-20deg, transparent 50%, white);
            mask: linear-gradient(-20deg, transparent 50%, white);
    top: 0;
    transform-style: flat;
    pointer-events: none;
    z-index: -1;
  }

  .bear-link {
    color: canvasText;
    position: fixed;
    top: 1rem;
    left: 1rem;
    width: 48px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    opacity: 0.8;
  }

  :where(.x-link, .bear-link):is(:hover, :focus-visible) {
    opacity: 1;
  }

  .bear-link svg {
    width: 75%;
  }

  /* Utilities */
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

div.tp-dfwv {
  position: fixed;
}
</style>

  
</head>

<body>
  <h1 class="fluid">when you scroll.</h1>
    <div class="arrow">
      <label>behind the scenes.</label>
      <svg
        aria-hidden="true"
        viewBox="0 0 144 141"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M129.189 0.0490494C128.744 0.119441 126.422 0.377545 124.03 0.635648C114.719 1.6446 109.23 2.4893 108.058 3.09936C107.119 3.56864 106.674 4.34295 106.674 5.44576C106.674 6.71281 107.424 7.51058 109.043 7.97986C110.403 8.37875 110.825 8.42567 118.87 9.52847C121.778 9.92736 124.288 10.3028 124.475 10.3732C124.663 10.4436 122.951 11.1006 120.676 11.8749C110.028 15.4414 100.412 20.7677 91.7339 27.9242C88.38 30.7164 81.6957 37.4271 79.2096 40.5009C73.8387 47.2116 69.6874 54.8139 66.5681 63.7302C65.9348 65.4665 65.3484 66.8978 65.2546 66.8978C65.1374 66.8978 63.7771 66.7336 62.2291 66.5693C52.9649 65.5134 43.1847 68.1649 34.1316 74.2186C24.7735 80.46 18.5349 87.7338 10.5371 101.742C2.53943 115.726 -1.0959 127.482 0.287874 135.014C0.89767 138.463 2.0469 140.035 3.97011 140.082C5.28352 140.105 5.37733 139.659 4.20465 139.049C3.05541 138.463 2.6567 137.9 2.32835 136.281C0.616228 128.021 6.24512 113.028 17.4325 96.1104C23.2725 87.241 28.362 81.9147 35.5622 77.1046C43.8649 71.5437 52.7069 69.033 61.1737 69.8308C64.9967 70.1828 64.6917 69.9247 64.1992 72.4822C62.2525 82.5013 63.8005 92.6378 67.9753 97.354C73.1116 103.079 81.9771 102 85.0027 95.2657C86.3395 92.2858 .........完整代码请登录后点击上方下载按钮下载查看