css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码-html代码-BFW代码库

css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码

代码语言：html

代码描述：css+svg实现大气鼠标滚动页面内容横向竖向跟随滚动代码，向下滚动页试试。

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

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

<head>
  <meta charset="UTF-8">
  
  <meta name="viewport" content="width=device-width, initial-scale=1">
<link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/reset.min.css">

  <link rel='stylesheet' href='https://fonts.googleapis.com/css2?family=Indie+Flower&amp;display=swap'>
  
<style>


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

:root { 
   --items: min(30rem, 70vw);
   --color-base: #181213;
   scroll-timeline: --page block;  
   
   @media (prefers-reduced-motion: no-preference) {
      scroll-behavior: smooth;
   }
}

body {
   font: 300 1rem/1.33 "Helvetica";
   color: var(--color-base);
   display: grid;
   overflow-x: hidden;
}

img {
   inline-size: 100%;
   max-inline-size: 100%;
   block-size: auto;
}

hr[id] {
   border: 0;
   margin: 0;
}


/* animations */

@keyframes clip {  
   to { transform: scale(1.75); } 
}
@keyframes scroll { 
   to { translate: calc((var(--items) * -3) + 20vw) 0; }
}
@keyframes moveup {
    to { transform: translateY(var(--moveup)); }
}
@keyframes reveal {
    85%, 100% { opacity: 1 }
    100% { transform: translateY(0);  }
}


body > svg {
   block-size: 0;
   inline-size: 0;

   clipPath {
      transform-origin: 50vw 50vh;
      /* on retina displays the transform-origin 
       * seems bugged (opened an issue on 
       * https://issues.chromium.org/issues/366293477)
       */
      @media (-webkit-min-device-pixel-ratio: 1.5) { 
         transform-origin: 100vw 100vh;
      }
      transform: scale(0);
      animation: linear clip 1 forwards;
      animation-timeline: --page;
      animation-range: entry 10dvb exit 100dvb;   
   }
}



/* header */

header {
   position: fixed;
   z-index: 1;
   inset: 0 0 auto 0;
   background: #fff;
   
   @supports (animation-timeline: view()) {  
      --moveup: -101%;
      animation: ease-out moveup 1 forwards;
      animation-timeline: --page;
      animation-range: entry 30dvb exit 57dvb;
   }
   
   > div {
      display: flex;
      .........完整代码请登录后点击上方下载按钮下载查看