three实现三维蝴蝶飞舞动画效果代码

代码语言:html

所属分类:三维

代码描述:three实现三维蝴蝶飞舞动画效果代码

代码标签: three 三维 蝴蝶 飞舞 动画

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

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

<head>

  <meta charset="UTF-8">

  
<style>
@import url('https://fonts.googleapis.com/css2?family=Libre+Barcode+39+Text&family=Macondo+Swash+Caps&display=swap');
html, body {
    min-height: 100%;
}
body{
  overflow: hidden;
  margin: 0;
  background: linear-gradient(#face8D 75%, aquamarine);
}
canvas{
  position: absolute;
}

#butterfly{
  position: absolute;
  font-family: 'Macondo Swash Caps', cursive;
  font-size: 10vh;
  width: 100%;
  text-align: center;
  bottom: 1vh;
  color: maroon;
}

#player{
  position: absolute;
  opacity: 0.1;
}
#player:hover{
  opacity: 1;
}

.unselectable {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: none;
}
</style>



</head>

<body >
  <canvas id="cnv"></canvas>
<div id="butterfly" class="unselectable">Schmetterling</div>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/es-module-shims.1.6.2.js"></script>
<script type="importmap">
  {
    "imports": {
        "three":"//repo.bfw.wiki/bfwrepo/js/module/three/build/150/three.module.js",
   
      "th.........完整代码请登录后点击上方下载按钮下载查看

网友评论0