three实现海底三维海豚游动动画效果代码-html代码-BFW代码库

three实现海底三维海豚游动动画效果代码

代码语言：html

所属分类：三维

代码描述：three实现海底三维海豚游动动画效果代码

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

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Cyber Ocean - Core</title>
    <link
      href="https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Share+Tech+Mono&display=swap"
      rel="stylesheet"
    />
    <style>
      :root {
        --neon-blue: #00d4ff;
        --neon-cyan: #00ffff;
        --neon-cyan-dark: #0099cc;
        --neon-cyan-glow: #00e5ff;
        --dark-bg: #05050f;
        --panel-bg: rgba(5, 5, 15, 0.7);
        --grid-color: rgba(0, 212, 255, 0.03);
      }

      * { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }

      html, body {
        background: var(--dark-bg);
        overflow: hidden;
        font-family: 'Share Tech Mono', monospace;
        color: #fff;
        width: 100%;
        height: 100%;
      }

      canvas#three {
        position: fixed;
        inset: 0;
        z-index: 1;
        outline: none;
      }

      /* === LOADING SCREEN === */
      #loading-screen {
        position: fixed;
        inset: 0;
        background: var(--dark-bg);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.8s;
      }

      #loading-screen.hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
      }

      .loader-container { position: relative; display: flex; flex-direction: column; align-items: center; }
      .loader-rings { position: relative; width: 220px; height: 220px; margin-bottom: 2rem; }
      .loader-circle { position: absolute; inset: 0; border-radius: 50%; }
      .loader-circle svg { width: 100%; height: 100%; }
      
      .loader-tick {
        stroke: rgba(255, 255, 255, 0.12);
        stroke-width: 1.5;
        transition: stroke 0.15s ease, filter 0.15s ease;
      }
      .loader-tick.active { stroke: var(--neon-cyan); filter: drop-shadow(0 0 4px var(--neon-cyan)); }

      .loader-center {
        position: absolute; inset: 40px; display: flex; flex-direction: column;
        align-items: center; justify-content: center; text-align: center;
      }
      .loader-status {
        font-family: 'Orbitron', sans-serif; font-size: 0.7rem; font-weight: 700;
        letter-spacing: 0.15em; color: rgba(255, 255, 255, 0.7); text-transform: uppercase; line-height: 1.6;
      }

      .explore-b.........完整代码请登录后点击上方下载按钮下载查看