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

代码语言：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;
      justify-content: space-between;
      align-items: center;
      gap: 1rem 2rem;
      margin: 0 10vw;
      border-bottom: 1px solid;
      padding-block: 2rem;
   }
   
   svg {
      inline-size: 8rem;
   }

   ul {
      display: flex;
      gap: 2.5rem;
      :any-link {
         font-weight: 300;
         font-size: 1.25rem;
         color: inherit;
         text-decoration: none;
      }
   }
}


/* general sections style */
section {
   padding-block: 7dvb;
   
   h2 {
      font-size: clamp(3rem, 6vw, 6rem);
      line-height: 1;
      letter-spacing: -.15rem;
      font-weight: 300;
      text-shadow: 0 0 1px currentColor;
   }
   
   h3 {
      margin-block: 2rem;
      font-size: clamp(1.6rem, 4.5vw, 4.5rem);
      font-weight: 400;
   }

   p {
      font-size: 1.1rem;
      line-height: 1.5;
   }   
}
 

/* general hero style */
   
.hero {
   min-block-size: 100dvb;
   
   
   @supports (animation-timeline: view()) {  
      block-size: 100dvb;
      inline-size: 100vw;
      position: sticky;
      top: 0;
      grid-area: 1 / 1;
      
      --moveup: -100dvb;
      animation: linear moveup 1 forwards;
      animation-timeline: --page;
      animation-range: entry 200dvb entry 300dvb;  
      
      /* give enough room to run scroll-animations
       * so the main element is not hidden
       */
      ~ main {
         margin-block-start: 200dvb;
         min-block-size: 100dvb;
      }
   }

   
   h2 {
      font-size: clamp(2.5rem, 8vw, 8rem);
      font-weight: 320;
      text-shadow: none;
      max-inline-size: 12ch;
   }


   > div  {
      block-size: 100%;
      display: grid;
      align-items: center;     
      margin-inline: 10vw;
   }
   
   
   :any-link {
      --hover: 0;
      background-color: rgba(0, 72, 90, var(--hover));
      transition: all .33s;
      &:hover {
         color: #fff;
         border-color: transparent;
         --hover: 1;
      }
   }
   
   
   [href^="#"] {
      --moveup: -1rem;
      animation: moveup 1s 
         cubic-bezier(.5,0,1,.5) infinite alternate;
      position: absolute;
      border-radius: 50%;
      border: 0;
      bottom: 5rem;
      left: calc(50% - 2rem);
      block-size: 4rem;
      padding: .75rem;
      aspect-ratio: 1;
      color: inherit;
      
      @supports (not (animation-timeline: view())) { 
         display: none;      
      }

   }
   

   svg {
      transform: rotateZ(.25turn);
      inline-size: 100%;
      aspect-ratio: 1;
      fill: currentColor;
   }
   
   
   .hero__content {
      display: flex;
      align-items: start;
      flex-direction: column;
      gap: 2rem;
   }

   :where(:any-link) {
      --hover: 0;
      color: inherit;
      text-decoration: none;
      border-radius: 1.5rem;
      padding: .75rem 2rem;
      font-size: 92%;
      letter-spacing: 0;
      border: 1px solid currentColor;
   }
}

   

/* 2nd hero hidden */   
#shape-the-future {

   color: #fff;
   background: linear-gradient(125deg, 
      rgb(131 163 172), rgba(223, 151,132));
   
   @supports (animation-timeline: view()) {  
      clip-path: url("#blob");
   }

   > div {
      gap: 10vw;
      
      @supports (animation-timeline: view()) {  
         grid-template-columns: 55vw auto;
      
         translate: 0 0;
         will-change: translate;
         animation: ease-out scroll 1 forwards;
         animation-timeline: --page;
         animation-range: entry 100dvb entry 200dvb;  
      }
   } 

   ul {
      display: flex;
      block-size: calc(100dvb - 10rem);
      
      @supports (not (animation-timeline: view())) {  
         border-inline-end: 1px #fff solid;
         block-size: auto;
         
         @media (width < 40rem) {
            flex-direction: column;
            border-inline: 0;
         }
      }
   }
   
   li {
      
      flex: 1;
      padding-inline: 2.5rem;
      border-inline-start: 1px #fff solid;
      inline-size: var(--items);
      
      h3, p { text-align: left; }
      
      @supports (not (animation-timeline: view())) {  
         inline-size: auto;
         h3, p { text-align: center; }
         
         @media (width < 40rem) {
            border-inline: 0;
            
            &:not(:last-child) {
               padding-block-end: 3rem;
               border-block-end: 1px #fff solid;
            }
         }
      }
   }  
}


main {
 
   section {
      min-block-size: 100dvb;
      
      @media (prefers-reduced-motion: no-preference) {
         opacity: 0;
         transform: translateY(6rem);
         animation: ease-out reveal 1 forwards;
         animation-timeline: view();
         animation-range: cover 10% cover 30%;
      }      
      
      > div {
         padding-inline: 10vw;
      }
   }

   .news {
      margin-block-start: 5dvb;
   
      li {
         padding-block: 2dvb;
         border-bottom: 1px solid;
         container: article / inline-size;
         --hover: 0;
         &:hover {
            --hover: 1;
         }
      }

      article {
         position: relative;
         display: grid;
         grid-template-columns: minmax(15vw, 22rem) auto;
         @container article (width <= 48rem) {
            grid-template-columns: 1fr;
         }
         
         align-items: center;
         gap: 2rem;
         opacity: calc(0.7 + (var(--hover) * 0.3));
         transition: opacity .33s;

      }

      div {
         aspect-ratio: 1.8 / 1;
         overflow: hidden;
         border-radius: 1rem;
         inline-size: 100%;
         
         @container article (width <= 48rem) {
            display: none;
         }

         img {
            object-fit: cover;
            block-size: 100%;
         }
      }

      :any-link {
         display: grid;
         grid-template: auto auto / 1fr minmax(2.5rem, 6cqi);
         gap: 1rem min(5vw, 5rem);
         justify-content: space-between;
         align-items: center;
         color: inherit;
         text-decoration: none;

         [itemprop="author"] {
            grid-area: 1 / 1 / 2 / 3;
            font-size: 1rem;
            line-height: 1.33;
            color: #847c79;
            flex: 1 0 100%;

         }

         [itemprop="name"] {
            grid-area: 2 / 1 / 3 / 2;
            flex-wrap: nowrap;
            font-size: clamp(1.35rem, 2.6vw, 2.1rem);
            line-height: 1.33;
         }

         &:hover [itemprop="name"] {
            text-decoration: underline;
         }

         &::before {
            content: "";
            position: absolute;
            inset: 0;
         }
      }

      svg {
         grid-area: 1 / 2 / 3 / 3;
         aspect-ratio: 1;
         padding: .75rem;
         inline-size: 100%;
         border-radius: 50%;
         border: 2px solid;
         clip-path: polygon(18% 0, 100% 0, 100% 100%, 18% 100%);
         color: #645c59;
         fill: currentColor;
         transition: transform .33s;
         transform: rotateZ(calc(var(--hover) * .25turn));
      }
   }
}









































/* show warning */

.warning {
   display: none;
   position: fixed;
   inset: 0;
   z-index: 100;
   place-content: center;
   font-size: 2rem;
   
   p {
      position: relative;
      background: #fff;
      padding: 3rem;
      font-weight: 400;
      border: 3px rgba(223, 151,132) solid;
      border-radius: 1rem;
      inline-size: min(45rem, 85vw);
      box-shadow: 0 0 0 50vmax rgba(131, 163, 172, .7);
      -webkit-background-clip: text;
      color: transparent;
      background-image:  linear-gradient(125deg, 
      rgb(131, 163, 172), rgba(223, 151,132));
      
      &::before {
         content: "⚠️" / "warning!";
         position: absolute;
         inset: 0;
         z-index: -1;
         background: #fff;
      }
   }

}

body:hover .warning {
   @supports (not (animation-timeline: view())) {
      display: grid;
   } 
}


/* fix images */
span:has(> img) {
   inline-size: 86%;
   aspect-ratio: 86 / 100;
   display: block;
   overflow: hidden;
   margin-inline: auto;
   
   img {
      inline-size: 115%;
      max-inline-size: 115%;
   }
}
</style>

  
  
</head>

<body translate="no">
  <header>
   
   <div>
      <h1>
         <a href="https://www.alpenite.com/en" 
            target="_blank" aria-label="Alpenite homepage">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 30"
              focusable="false" aria-hidden="true">
         .........完整代码请登录后点击上方下载按钮下载查看