three实现三维炫酷音频可视化展现动画效果代码
代码语言:html
所属分类:三维
代码描述:three实现三维炫酷音频可视化展现动画效果代码
代码标签: three 三维 炫酷 音频 可视化 展现 动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?family=Share+Tech+Mono:wght@400&family=Orbitron:wght@400;700;900&display=swap" rel="stylesheet">
<style>
*, *::before, *::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Share Tech Mono', monospace;
overflow: hidden;
background: #000;
color: #00ff41;
cursor: crosshair;
}
#scene-container {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background: radial-gradient(ellipse at center, #001a05 0%, #000000 75%);
}
#matrix-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
background:
linear-gradient(90deg, transparent 98%, rgba(0, 255, 65, 0.04) 100%),
linear-gradient(0deg, transparent 98%, rgba(0, 255, 65, 0.04) 100%);
background-size: 30px 30px;
opacity: 0.15;
}
.vignette {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
box-shadow: inset 0 0 200px 50px rgba(0,0,0,0.75);
z-index: 998;
}
.scan-line {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 3px;
background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.8), transparent);
opacity: 0.7;
animation: scan 4s linear infinite;
z-index: 999;
box-shadow: 0 0 15px 1px rgba(0, 255, 65, 0.6);
}
.hud-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
pointer-events: none;
z-index: 100;
}
.hud-corner {
position: absolute;
width: 60px;
height: 60px;
border: 2px solid rgba(0, 255, 65, 0.5);
opacity: 0.8;
animation: pulse-corner 6s infinite alternate;
}
.hud-corner::before, .hud-corner::after {
content: '';
position: absolute;
background: rgba(0, 255, 65, 0.7);
box-shadow: 0 0 8px #00ff41;
}
.hud-corner.top-left { top: 20px; left: 20px; border-right: none; border-bottom: none; }
.hud-corner.top-left::before { width: 15px; height: 2px; bottom: -2px; left: 0; }
.hud-corner.top-left::after { width: 2px; height: 15px; right: -2px; top: 0; }
.hud-corner.top-right { top: 20px; right: 20px; border-left: none; border-bottom: none; }
.hud-corner.top-right::before { width: 15px; height: 2px; bottom: -2px; right: 0; }
.hud-corner.top-right::after { width: 2px; height: 15px; left: -2px; top: 0; }
.hud-corner.bottom-left { bottom: 20px; left: 20px; border-right: none; border-top: none; }
.hud-corner.bottom-left::before { width: 15px; height: 2px; top: -2px; left: 0; }
.hud-corner.bottom-left::after { width: 2px; height: 15px; right: -2px; bottom: 0; }
.hud-corner.bottom-right { bottom: 20px; right: 20px; border-left: none; border-top: none; }
.hud-corner.bottom-right::before { width: 15px; height: 2px; top: -2px; right: 0; }
.hud-corner.bottom-right::after { width: 2px; height: 15px; left: -2px; bottom: 0; }
#main-title {
position: fixed;
top: 25px;
left: 50%;
transform: translateX(-50%);
font-family: 'Orbitron', sans-serif;
font-size: 1.4em;
font-weight: 700;
letter-spacing: 5px;
text-transform: uppercase;
text-shadow: 0 0 5px #00ff41, 0 0 15px #00ff41, 0 0 25px #00ff41;
animation: pulse 3s infinite;
z-index: 101;
display: flex;
align-items: center;
white-space: nowrap;
}
#main-title .bracket {
font-size: 1.5em;
margin: 0 15px;
opacity: 0.7;
}
.controls {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
z-index: 1000;
}
.cyber-panel {
background: rgba(0, 40, 10, 0.25);
border: 1px solid rgba(0, 255, 65, 0.3);
padding: 15px 20px;
box-shadow:
0 0 30px rgba(0, 255, 65, 0.2),
inset 0 0 25px rgba(0, 255, 65, 0.1);
display: flex;
align-items: center;
gap: 15px;
position: relative;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
clip-path: polygon(0 15px, 15px 0, calc(100% - 15px) 0, 100% 15px, 100% calc(100% - 15px), calc(100% - 15px) 100%, 15px 100%, 0 calc(100% - 15px));
}
.file-label {
color: #0.........完整代码请登录后点击上方下载按钮下载查看
网友评论0