three实现天空鸟群飞翔鼠标交互背景动画效果代码-html代码-BFW代码库

three实现天空鸟群飞翔鼠标交互背景动画效果代码

代码语言：html

所属分类：动画

代码描述：three实现天空鸟群飞翔鼠标交互背景动画效果代码，鸟儿成群结队在空中飞行，鼠标放上去还会故意躲避鼠标。

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
@import url("https://fonts.googleapis.com/css2?family=Asap&display=swap");
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
html,
body {
  overscroll-behavior-x: none;
  overscroll-behavior-y: none;
}
body {
  font-family: "Asap", sans-serif;
  position: relative;
  width: 100vw;
  min-height: 100vh;
  text-align: center;
  overflow-x: hidden;
  background: linear-gradient(
    to bottom,
    hsl(200deg, 80%, 55%),
    hsl(200deg, 80%, 80%),
    hsl(200deg, 80%, 80%),
    hsl(230deg, 80%, 80%),
    hsl(260deg, 80%, 80%),
    hsl(290deg, 80%, 80%),
    hsl(320deg, 80%, 80%),
    hsl(340deg, 80%, 80%),
    hsl(340deg, 80%, 70%) 100%
  );
  color: white;
  font-size: clamp(13px, 5.5vw, 30px);
}
#cloud div::before,
#cloud div::after {
  content: "";
  display: block;
  position: fixed;
  bottom: 0;
  left: 0;

  width: 100vw;
  height: 100vh;

  background-image: url(https://raw.githubusercontent.com/happy358/misc/main/image/cloud_X.png);

  background-repeat: repeat-x;
  -webkit-animation: cloud var(--duration) linear infinite forwards;
          animation: cloud var(--duration) linear infinite forwards;

  --posX: right;
  --duration: 15s;
  --lowHeight: 20vh;
  --highHeight: 90vh;
  --layerNum: 4;
  --index: 0;
  --opacity: 0.5;
  --moveX: 300px;

  -webkit-animation-delay: calc(
    (var(--duration) / var(--layerNum)) * var(--index) * -1
  );

          animation-delay: calc(
    (var(--duration) / var(--layerNum)) * var(--index) * -1
  );
  opacity: 0;
}
#cloud div::before {
  --index: 0;
  /*
  --posX: right;
*/
}
#cloud div::after {
  --index: 2;
  /*
  --posX: left;
*/
  transform: scale3d(-1, 1, 1); /*左右反転*/
}
#cloud div#cloud_layer2::before,
#cloud div#cloud_layer2::after {
  background-image: url(https://raw.githubusercontent.com/happy358/misc/main/image/cloud.png);
}
#cloud div#cloud_layer2::before {
  --index: 3;
}
#cloud div#cloud_layer2::after {
  --index: 1;
}
canvas {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  position: fixed;
  width: 100vw;
  height: 100vh;
  top: 0;
  left: 0;
}
main {
  position: relative;
  mix-blend-mode: overlay;
}
section {
  position: relative;
  width: 100vw;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.arrows {
  width: 60px;
  height: 75px;
  position: absolute;
  bottom: 0;
  transform: scale3d(0.5, 0.5, 1);
}
.arrows path {
  stroke: black;
  fill: transparent;
  stroke-width: 5px;
  -webkit-animation: arrow 2s infinite;
          animation: arrow 2s infinite;
}
@-webkit-keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes arrow {
  0% {
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
.arrows path.a1 {
  -webkit-animation-delay: -1s;
          animation-delay: -1s;
}
.arrows path.a2 {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.arrows path.a3 {
  -webkit-animation-delay: 0s;
          animation-delay: 0s;
}

@-webkit-keyframes cloud {
  0% {
    opacit.........完整代码请登录后点击上方下载按钮下载查看