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"/>.........完整代码请登录后点击上方下载按钮下载查看