anime实现鼠标滚动logo树叶落下动画效果代码-html代码-BFW代码库

anime实现鼠标滚动logo树叶落下动画效果代码

代码语言：html

代码描述：anime实现鼠标滚动logo树叶落下动画效果代码

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

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

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

  
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">

  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>
  
<style>
body {
  height: 300vh;
}

:root {
  --width: 100%;
  --bg: #efefef;
}

.scroll-direction {
  font-size: 1.5rem;
}

.scroll-direction:after {
  content: attr(data-direction);
}

header {
  position: fixed;
  width: var(--width);
  margin: 0;
  background: var(--bg);
  padding: 1rem;
  height: 100vh;
}

.logo {
  position: absolute;
  transform: translate3d(0, 0, 0);
  height: 30rem;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

main, article {
  height: 100%;
}

.wrapper {
  margin: 0 auto;
  max-width: var(--width);
}
</style>


  
  
</head>

<body>
  <header role="banner">

  
<svg class="logo"id="Times-academy" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440.59 487"><defs><style>.cls-1,.cls-9{fill:#1d1d1b;}.cls-2{fill:#e8336e;}.cls-3{fill:#0073a5;}.cls-4{fill:#6fc2b6;}.cls-5{fill:#007036;}.cls-6{fill:#bc0b3b;}.cls-7{fill:#823783;}.cls-8{fill:#ec6608;}.cls-9{fill-rule:evenodd;}</style></defs><title>Times-academy</title><path id="T" class="cls-1" d="M268.79,378.46H177.56v-2.33L203,364V215.34h-.2a63,63,0,0,0-14.41,1.74,29.59,29.59,0,0,0-12.3,7.1c-5.18,4.79-32.29,32.76-32.29,32.76l-2.92-1.13,4.05-48.44H298.16l5.08,48.44-2.92,1.13s-27.1-28-32.28-32.76a29.65,29.65,0,0,0-12.3-7.1,50.29,50.29,0,0,0-12.87-1.62V364l25.84,11.9Z"/><g id="Leaf-pink"><path id="Pink" class="cls-2" d="M333.26,149.5c-7.65,9.39-2.53,22.91-2.53,22.91s14.4,2.11,22.06-7.28,5.83-27,5.83-27S340.92,140.1,333.26,149.5Z"/><path id="Pink-2" data-name="Pink" class="cls-2" d="M331.67,102c-8.73,11.65-1.92,27.64-1.92,27.64s17.42,1.84,26.15-9.82,5.68-32.66,5.68-32.66S340.41,90.28,331.67,102Z"/><path id="Pink-3" data-name="Pink" class="cls-2" d="M350.28,52.24c-8,10.68-1.76,25.33-1.76,25.33s16,1.69,24-9,5.19-29.94,5.19-29.94S358.28,41.56,350.28,52.24Z"/><path id="Pink-4" data-name="Pink" class="cls-2" d="M415.3,115.22c-6.4,5.21-4.85,14.94-4.85,14.94s9.32,3.4,15.72-1.81,7.61-17.18,7.61-17.18S421.7,110,415.3,115.22Z"/><path id="Pink-5" data-name="Pink" class="cls-2" d="M376.73,128.5c-8.47,7.85-5.46,21.26-5.46,21.26s13.3,3.88,21.77-4,9.1-24.64,9.1-24.64S385.2,120.65,376.73,128.5Z"/><path id="Pink-6" data-name="Pink" class="cls-2" d="M364.23,166.24c-6.07,3.47-6.15,11.77-6.15,11.77s7.29,4.1,13.36.63,8.77-13.27,8.77-13.27S370.31,162.77,364.23,166.24Z"/><path id="Pink-7" data-name="Pink" class="cls-2" d="M374.66,106.9c-3.28,4.11-1,9.93-1,9.93s6.25.87,9.53-3.24,2.41-11.71,2.41-11.71S377.94,102.79,374.66,106.9Z"/><path id="Pink-8" data-name="Pink" class="cls-2" d="M403.35,148.19c-5.73,3.27-5.82,11.09-5.82,11.09s6.87,3.88,12.6.61,8.29-12.5,8.29-12.5S409.08,144.93,403.35,148.19Z"/></g><g id="Leafs-blue"><path id="blue" class="cls-3" d="M152.77,121c2.49,14.31-10.86,25.54-10.86,25.54s-16.38-6.15-18.87-20.45,9.79-31.7,9.79-31.7S150.28,106.65,152.77,121Z"/><path id="blue-2" data-name=".........完整代码请登录后点击上方下载按钮下载查看