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

代码语言：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% {
    opacity: 0;
    background-position: var(--posX) var(--moveX) bottom
      calc(-1 * var(--lowHeight));
    background-size: calc(1 * var(--lowHeight)) var(--lowHeight);
  }
  5% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: var(--posX) bottom;
    background-size: calc(3 * var(--highHeight)) var(--highHeight);
  }
}

@keyframes cloud {
  0% {
    opacity: 0;
    background-position: var(--posX) var(--moveX) bottom
      calc(-1 * var(--lowHeight));
    background-size: calc(1 * var(--lowHeight)) var(--lowHeight);
  }
  5% {
    opacity: var(--opacity);
  }
  80% {
    opacity: var(--opacity);
  }
  100% {
    opacity: 0;
    background-position: var(--posX) bottom;
    background-size: calc(3 * var(--highHeight)) var(--highHeight);
  }
}
</style>

  
</head>

<body translate="no">

<canvas id='canvas'></canvas>
<div id='cloud'>
  <div id='cloud_layer1'></div>
  <div id='cloud_layer2'></div>
</div>
<main>
  <section>
    <div>
      <h1>Sky and Birds</h1>
      <p>Background</p>

    </div>
    <svg class="arrows">
      <path class="a1" d="M0 0 L30 32 L60 0"></path>
      <path class="a2" d="M0 20 L30 52 L60 20"></path>
      <path class="a3" d="M0 40 L30 72 L60 40"></path>
    </svg>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section><svg class="arrows">
      <path class="a1" d="M0 0 L30 32 L60 0"></path>
      <path class="a2" d="M0 20 L30 52 L60 20"></path>
      <path class="a3" d="M0 40 L30 72 L60 40"></path>
    </svg>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section>
  </section>
  <section>
    <div>
      <p>Fin.</p>
    </div>
  </section>
</main>

<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.3.js"></script>

    <script type="importmap">
  {
    "imports": {
      "three": "//repo.bfw.wiki/bfwrepo/js/module/three/build/162/three.module.js",
      "three/addons/": "//repo.bfw.wiki/bfwrepo/js/module/three/examples/162/jsm/"
    }
  }
</script>
      <script  type="module">

"use strict";

import * as THREE from "three";

import { GPUComputationRenderer as e } from "three/addons/misc/GPUComputationRenderer.js";

!function () {
  function n() {
    h = window.innerWidth / 2,
    y = window.innerHeight / 2,
    u.aspect = window.innerWidth / window.innerHeight,
    u.updateProjectionMatrix(),
    m.setSize(window.innerWidth, window.innerHeight);
  }
  function t(e) {
    !1 !== e.isPrimary && (v = e.clientX - h, p = e.clientY - y);
  }
  const o = {
    color1: "turquoise",
    color2: "#aaaaaa",
   .........完整代码请登录后点击上方下载按钮下载查看