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

代码语言：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="blue" class="cls-3" d="M171.72,95.46c-2.35,5.22-9.19,6-9.19,6s-4-5.55-1.65-10.77,10.2-8.22,10.2-8.22S174.06,90.25,171.72,95.46Z"/><path id="blue-3" data-name="blue" class="cls-3" d="M108.92,102c8.73,11.65,1.92,27.64,1.92,27.64s-17.41,1.84-26.14-9.82S79,87.11,79,87.11,100.19,90.28,108.92,102Z"/><path id="blue-4" data-name="blue" class="cls-3" d="M90.31,52.24c8,10.68,1.77,25.33,1.77,25.33s-16,1.69-24-9-5.2-29.94-5.2-29.94S82.31,41.56,90.31,52.24Z"/><path id="blue-5" data-name="blue" class="cls-3" d="M154.05,48c5.6,13.41-4.94,27.31-4.94,27.31s-17.34-2.37-22.93-15.78,2.54-33.07,2.54-33.07S148.46,34.58,154.05,48Z"/><path id="blue-6" data-name="blue" class="cls-3" d="M189.89,129c2.81,10.4-6.24,19.68-6.24,19.68S171.2,145.3,168.4,134.9s5-24.14,5-24.14S187.09,118.57,189.89,129Z"/><path id="blue-7" data-name="blue" class="cls-3" d="M122,71.94c5.65,7.8,1,18.29,1,18.29s-11.54,1-17.18-6.78-3.38-21.66-3.38-21.66S116.36,64.13,122,71.94Z"/><path id="blue-8" data-name="blue" class="cls-3" d="M162.34,185.13c8,10.06,23.31,7.84,23.31,7.84s5.6-14.42-2.4-24.48-26.76-12.19-26.76-12.19S154.34,175.06,162.34,185.13Z"/></g><g id="Leafs-green"><path id="green" class="cls-4" d="M108.66,148.17c7.66,9.39,2.54,22.91,2.54,22.91s-14.4,2.11-22.06-7.28-5.83-27-5.83-27S101,138.77,108.66,148.17Z"/><path id="green-2" data-name="green" class="cls-5" d="M93.18,237c13.82-10.12,32.73-2.15,32.73-2.15s2.13,20.26-11.69,30.38-38.69,6.52-38.69,6.52S79.35,247.14,93.18,237Z"/><path id="green-3" data-name="green" class="cls-5" d="M40.06,228.54c7.63-5.6,18.08-1.19,18.08-1.19s1.17,11.19-6.46,16.78-21.37,3.6-21.37,3.6S32.42,234.14,40.06,228.54Z"/><path id="green-4" data-name="green" class="cls-4" d="M34.91,170.23c14.65.24,23.29,15.34,23.29,15.34s-9.13,14.8-23.78,14.57S4.83,184.71,4.83,184.71,20.26,170,34.91,170.23Z"/><path id="green-5" data-name="green" class="cls-4" d="M25.3,115.22c6.39,5.21,4.84,14.94,4.84,14.94s-9.32,3.4-15.72-1.81-7.61-17.18-7.61-17.18S18.89,110,25.3,115.22Z"/><path id="green-6" data-name="green" class="cls-5" d="M49.87,261.35c6.25-5.39,15.56-2.16,15.56-2.16s1.72,9.77-4.53,15.16-18.25,4.48-18.25,4.48S43.62,266.74,49.87,261.35Z"/><path id="green-7" data-name="green" class="cls-4" d="M63.86,128.5c8.47,7.85,5.46,21.26,5.46,21.26s-13.29,3.88-21.76-4-9.11-24.64-9.11-24.64S55.39,120.65,63.86,128.5Z"/><path id="green-8" data-name="green" class="cls-5" d="M69.47,234.4c4.5-3.29,10.65-.7,10.65-.7s.7,6.59-3.8,9.89-12.59,2.11-12.59,2.11S65,237.69,69.47,234.4Z"/><path id="green-9" data-name="green" class="cls-5" d="M142.75,171.54c5.65,7.81,1,18.31,1,18.31s-11.54,1-17.18-6.79-3.38-21.66-3.38-21.66S137.11,163.74,142.75,171.54Z"/><path id="green-10" data-name="green" class="cls-4" d="M76.36,166.24c6.08,3.47,6.16,11.77,6.16,11.77s-7.3,4.1-13.37.63-8.76-13.27-8.76-13.27S70.29,162.77,76.36,166.24Z"/><path id="green-11" data-name="green" class="cls-4" d="M65.94,106.9c3.27,4.11,1,9.93,1,9.93s-6.25.87-9.53-3.24S55,101.88,55,101.88,62.66,102.79,65.94,106.9Z"/><path id="green-12" data-name="green" class="cls-4" d="M37.25,148.19c5.73,3.27,5.82,11.09,5.82,11.09s-6.87,3.88-12.61.61-8.28-12.5-8.28-12.5S31.51,144.93,37.25,148.19Z"/><path id="green-13" data-name="green" class="cls-4" d="M13.19,209.27c8.32-3.62,17.12,2.67,17.12,2.67s-1.28,10.7-9.6,14.32S0,225.14,0,225.14,4.87,212.89,13.19,209.27Z"/><path id="green-14" data-name="green" class="cls-5" d="M82.25,184.9c14.91-2.91,27,10.55,27,10.55s-6,17-20.94,19.9-33.4-9.3-33.4-9.3S67.34,187.82,82.25,184.9Z"/><path id="green-15" data-name="green" class="cls-5" d="M130.12,216.23c5.81-4.67,4.49-13.54,4.49-13.54s-8.38-3.2-14.19,1.46-7,15.54-7,15.54S124.3,220.9,130.12,216.23Z"/></g><g id="Leaf-red"><path id="Red" class="cls-6" d="M259.52,36.46c-1.36,8.14,6.23,14.41,6.23,14.41s9.25-3.61,10.61-11.75S270.7,21.2,270.7,21.2,260.87,28.31,259.52,36.46Z"/><path id="Red-2" data-name="Red" class="cls-6" d="M284.49,120.93c-2.49,14.31,10.86,25.54,10.86,25.54s16.38-6.15,18.87-20.45-9.8-31.7-9.8-31.7S287,106.62,284.49,120.93Z"/><path id="Red-3" data-name="Red" class="cls-6" d="M286.54,48C281,61.4,291.49,75.3,291.49,75.3s17.33-2.37,22.92-15.78-2.54-33.07-2.54-33.07S292.14,34.58,286.54,48Z"/><path id="Red-4" data-name="Red" class="cls-6" d="M297.84,171.54c-5.65,7.81-.95,18.31-.95,18.31s11.53,1,17.17-6.79,3.39-21.66,3.39-21.66S303.49,163.74,297.84,171.54Z"/><path id="Red-5" data-name="Red" class="cls-6" d="M251.8,129.83c3.94,8.77,15.45,10.06,15.45,10.06s6.72-9.35,2.77-18.13-17.15-13.83-17.15-13.83S247.85,121.06,251.8,129.83Z"/><path id="Red-6" data-name="Red" class="cls-6" d="M268.84,95.46c2.35,5.22,9.19,6,9.19,6s4-5.55,1.64-10.77-10.19-8.22-10.19-8.22S266.5,90.25,268.84,95.46Z"/><path id="Red-7" data-name="Red" class="cls-6" d="M318.59,71.94c-5.64,7.8-.95,18.29-.95,18.29s11.53,1,17.17-6.78,3.38-21.66,3.38-21.66S324.23,64.13,318.59,71.94Z"/><path id="Red-8" data-name="Red" class="cls-6" d="M271.2,185.74c-7.15,10.26-21.56,7.42-21.56,7.42s-5.73-15.3,1.42-25.57,24.64-11.85,24.64-11.85S278.36,175.46,271.2,185.74Z"/></g><g id="Leafs-purple"><path id="Purple" class="cls-7" d="M235.63,118.16c2.28,16.63-13.61,29-13.61,29s-18.65-7.77-20.92-24.39,12.63-36.19,12.63-36.19S233.36,101.53,235.63,118.16Z"/><path id="Purple-2" data-name="Purple" class="cls-7" d="M230.43,29.13C230.86,43.65,216,52.89,216,52.89S200.7,44.52,200.27,30s14.2-30,14.2-30S230,14.62,230.43,29.13Z"/><path id="Purple-3" data-name="Purple" class="cls-7" d="M181.08,36.46c1.36,8.14-6.24,14.41-6.24,14.41s-9.24-3.61-10.6-11.75S169.9,21.2,169.9,21.2,179.72,28.31,181.08,36.46Z"/><path id="Purple-4" data-name="Purple" class="cls-7" d="M199.63,72.85c-.27,9.61-10.4,15.11-10.4,15.11s-9.8-6.16-9.53-15.77S190.21,53,190.21,53,199.89,63.24,199.63,72.85Z"/><path id="Purple-5" data-name="Purple" class="cls-7" d="M229.93,69.31c-2.34,5.22-9.18,6-9.18,6s-4-5.56-1.65-10.78,10.2-8.23,10.2-8.23S232.28,64.1,229.93,69.31Z"/><path id="Purple-6" data-name="Purple" class="cls-7" d="M240.74,74.22c-3,9.14,4.7,17.73,4.7,17.73s11.31-2.5,14.29-11.64-3.43-21.66-3.43-21.66S243.72,65.09,240.74,74.22Z"/><path id="Purple-7" data-name="Purple" class="cls.........完整代码请登录后点击上方下载按钮下载查看