three炫酷科技灯光交互三维网站特效代码-html代码-BFW代码库

three炫酷科技灯光交互三维网站特效代码

代码语言：html

所属分类：三维

代码描述：three炫酷科技灯光交互三维网站特效代码

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

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

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

  
  
<style>
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
	--c:#5EEAD4;
	--ink:#F0F9FF;
	--dim:rgba(240,249,255,0.35);
	--ghost:rgba(240,249,255,0.1);
	--mono:'Space Mono',monospace;
	--sans:'Syne',sans-serif;
}

html,body{
	width:100%;height:100%;
	background:#000;color:var(--ink);
	overflow:hidden;
	-webkit-font-smoothing:antialiased;
	cursor:none;
}

canvas.webgl{position:fixed;inset:0;z-index:0}

/* ─── cursor ─── */
#cur{
	position:fixed;z-index:9999;pointer-events:none;
	width:6px;height:6px;border-radius:50%;
	background:var(--c);mix-blend-mode:exclusion;
	transform:translate(-50%,-50%);
}
#cur-r{
	position:fixed;z-index:9998;pointer-events:none;
	width:36px;height:36px;border-radius:50%;
	border:1px solid rgba(94,234,212,0.2);
	transform:translate(-50%,-50%);
}


/* ════════════════════════════════
HUD
════════════════════════════════ */
#hud{
	position:fixed;inset:0;z-index:10;
	pointer-events:none;
}

/* ── top bar ── */
header{
	position:absolute;top:0;left:0;right:0;
	padding:28px 36px;
	display:flex;align-items:center;
	justify-content:space-between;
	pointer-events:all;
}

.logo{
	font-family:var(--sans);font-size:18px;
	font-weight:700;letter-spacing:0.22em;
	text-transform:uppercase;color:var(--ink);
	text-decoration:none;cursor:none;
}

nav{display:flex;align-items:center;gap:32px}
nav a{
	font-family:var(--mono);font-size:11px;
	letter-spacing:0.18em;text-transform:uppercase;
	color:var(--dim);text-decoration:none;
	cursor:none;transition:color .2s;
}
nav a:hover{color:var(--c)}

#gui-btn{
	font-family:var(--mono);font-size:11px;
	letter-spacing:0.15em;text-transform:uppercase;
	background:none;border:1px solid rgba(255,255,255,0.12);
	color:var(--dim);cursor:none;
	padding:7px 16px;transition:all .2s;
	pointer-events:all;
}
#gui-btn:hover{border-color:var(--c);color:var(--c)}
#gui-btn.open{border-color:rgba(94,234,212,0.5);color:var(--c);background:rgba(94,234,212,0.05)}

.live{
	display:flex;align-items:center;gap:6px;
	font-family:var(--mono);font-size:11px;
	letter-spacing:0.15em;text-transform:uppercase;
	color:var(--dim);
}
.dot{
	width:5px;height:5px;border-radius:50%;
	background:var(--c);box-shadow:0 0 8px var(--c);
	animation:pulse 2.4s ease-in-out infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.1}}

/* ── bottom title ── */
footer{
	position:absolute;bottom:0;left:0;right:0;
	padding:0 36px 32px;
	display:grid;
	grid-template-columns:1fr 1fr;
	align-items:end;
	gap:24px;
}

.f-left{display:flex;flex-direction:column;gap:10px}
.f-title{
	font-family:var(--sans);
	font-size:clamp(3.5rem,9vw,7.5rem);
	font-weight:800;line-height:0.88;
	letter-spacing:-0.03em;color:var(--ink);
}
.f-title.ghost{
	font-weight:400;
	color:transparent;
	-webkit-text-stroke:1px rgba(255,255,255,0.2);
}
.f-meta{
	display:flex;align-items:center;gap:16px;
}
.f-tag{
	font-family:var(--mono);font-size:11px;
	letter-spacing:0.15em;text-transform:uppercase;
	color:var(--dim);
}
.f-tag b{color:var(--c);font-weight:400}


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