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