three实现三维网格能量源动画效果代码-html代码-BFW代码库

three实现三维网格能量源动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现三维网格能量源动画效果代码

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

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

<head>
  <meta charset="UTF-8">
  

  
  
<style>
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { 
    overflow: hidden; 
    background: #050508; 
    color: #fff; 
    font-family: 'Inter', sans-serif;
}
#scene-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }

:root {
     --background-color: rgba(22, 22, 30, 0.5);
     --text-color: rgba(255, 255, 255, 0.95);
     --title-background-color: rgba(40, 40, 60, 0.6);
     --title-text-color: rgba(255, 255, 255, 0.95);
     --widget-color: rgba(60, 60, 80, 0.5);
     --hover-color: rgba(80, 80, 120, 0.6);
     --focus-color: rgba(100, 100, 150, 0.7);
     --number-color: #ff55aa;
     --string-color: #55aaff;
}

.energy-button {
    border-radius: 6px !important;
    background: linear-gradient(to right, rgba(255, 65, 108, 0.9), rgba(255, 75, 43, 0.9)) !important;
    color: white !important;
    font-weight: bold !important;
    font-size: 14px !important;
    box-shadow: 0 4px 15px rgba(255, 85, 170, 0.4) !important;
    transition: all 0.3s !important;
    width: 100% !important;
    height: 40px !important;
    margin-top: 15px !important;
    margin-bottom: 8px !important;
    cursor: pointer !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
    position: relative !important;
    overflow: hidden !important;
    backdrop-filter: blur(4px) !important;
}
.energy-button:before {
    content: '';
    position: absolute;
    top: -10px;
    left: -10px;
    right: -10px;
    bottom: -10px;
    background: linear-gradient(45deg, 
        rgba(255,255,255,0.1) 0%, 
        rgba(255,255,255,0.5) 25%, 
        rgba(255,255,255,0.1) 50%, 
        rgba(255,255,255,0) 50%);
    z-index: 1;
    transform: translateX(-100%);
    transition: transform 0.6s;
}
.energy-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 20px rgba(255, 75, 43, 0.6) !important;
}
.energy-button:hover:before {
    transform: translateX(100%);
}
.energy-button:active {
    transform: translateY(1px) !important;
}

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
</style>



  
  
</head>

<body translate="no">
  <div id="scene-container"></div>
  
      <script  type="module">
import * as THREE from "https://esm.sh/three";
import { OrbitControls } from "https://esm.sh/three/examples/jsm/controls/OrbitControls.js";
import { EffectComposer } from "https://esm.sh/three/examples/jsm/postprocessing/EffectComposer.js";
import { .........完整代码请登录后点击上方下载按钮下载查看