js+css实现鼠标移动实时控制两股对立声波碰撞粒子流代码-html代码-BFW代码库

js+css实现鼠标移动实时控制两股对立声波碰撞粒子流代码

代码语言：html

所属分类：粒子

代码描述：js+css实现鼠标移动实时控制两股对立声波碰撞粒子流代码，通过鼠标移动实时控制两股对立声波（左侧低频暖色与右侧高频冷色）碰撞融合，并同步呈现粒子流、频谱与波形动态视觉效果的交互式音频可视化网页。

代码标签： js css 鼠标移动实时控制两股对立声波碰撞粒子流代码叠加滚动代码

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

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

<head>
  <meta charset="UTF-8">
  
  
  
  
<style>
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;overflow:hidden;background:#000;cursor:none}
canvas{display:block;position:fixed;top:0;left:0;width:100%;height:100%}

/* ── HUD Overlay ─────────────────────────────────────────────────── */
#hud{
  position:fixed;top:0;left:0;width:100%;height:100%;
  pointer-events:none;z-index:10;
  font-family:'Courier New',monospace;
  color:rgba(255,255,255,.6);
}
#title{
  position:absolute;top:20px;left:50%;transform:translateX(-50%);
  text-align:center;
  transition:opacity 1.5s;
}
#title h1{
  font-size:clamp(18px,3vw,32px);font-weight:300;letter-spacing:8px;
  text-transform:uppercase;
  background:linear-gradient(90deg,#ff6b4a,#fff,#4a9eff);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
#title .sub{
  font-size:clamp(9px,1.2vw,12px);letter-spacing:4px;
  color:rgba(255,255,255,.3);margin-top:4px;
}

/* Side labels */
.side-label{
  position:absolute;top:50%;transform:translateY(-50%);
  font-size:10px;letter-spacing:3px;text-transform:uppercase;
  writing-mode:vertical-rl;
  opacity:.25;transition:opacity .5s;
}
#label-left{left:16px;color:#ff6b4a;text-orientation:mixed;transform:translateY(-50%) rotate(180deg)}
#label-right{right:16px;color:#4a9eff}

/* Freq displays */
.freq-display{
  position:absolute;bottom:60px;
  font-size:11px;font-variant-numeric:tabular-nums;
  letter-spacing:2px;opacity:.5;
}
#freq-left{left:30px;color:#ff6b4a}
#freq-right{right:30px;color:#4a9eff;text-align:right}

/* Center collision info */
#collision-info{
  position:absolute;bottom:20px;left:50%;transform:translateX(-50%);
  text-align:center;font-size:10px;letter-spacing:2px;
  color:rgba(255,255,255,.25);
}
#beat-display{
  font-size:18px;font-weight:700;
  color:rgba(255,255,255,.5);
  font-variant-numeric:tabular-nums;
}

/* Intro overlay */
#intro{
  position:fixed;top:0;left:0;width:100%;height:100%;
  background:rgba(0,0,0,.9);z-index:100;
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:16px;
  cursor:pointer;pointer-events:auto;
  transition:opacity 1s;
}
#intro h2{
  font-family:'Courier New',monospace;
  font-size:clamp(14px,2.5vw,24px);font-weight:300;
  letter-spacing:6px;text-transform:uppercase;
  color:rgba(255,255,255,.7);
}
#intro .hint{
  font-family:'Courier New',monospace;
  font-size:11px;letter-spacing:3px;
  color:rgba(255,255,255,.25);
  animation:pulse-hint 2s ease-in-out infinite;
}
@keyframes pulse-hint{0%,100%{opacity:.2}50%{opacity:.6}}

/* Credit */
#credit{
  position:absolute;bottom:20px;right:20px;
  font-size:9px;letter-spacing:2px;
  color:rgba(.........完整代码请登录后点击上方下载按钮下载查看