webgl模拟极昼太阳永远不落下海边动画代码-html代码-BFW代码库

webgl模拟极昼太阳永远不落下海边动画代码

代码语言：html

所属分类：其他

代码描述：webgl模拟极昼太阳永远不落下海边动画代码

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

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

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

  <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@300;400&display=swap" rel="stylesheet">
  
  
  
<style>
@layer reset, tokens, base, layout, ui, responsive;

@layer reset {
	*,
	*::before,
	*::after {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}
}

@layer tokens {
	:root {
		color-scheme: dark;

		--bg: #0a0a0f;
		--fg: #15120f;
		--muted: color-mix(in oklab, var(--fg) 62%, transparent);
		--accent: #1c1410;
		--track: color-mix(in oklab, var(--fg) 18%, transparent);
		--panel-bg: rgba(255, 255, 255, 0.14);
		--panel-border: rgba(255, 255, 255, 0.22);

		--font-display: "Bebas Neue", sans-serif;
		--font-mono: "DM Mono", monospace;
		--hairline: 0.0625rem;
		--ui-inset: 2rem;
		--nav-x: calc(var(--ui-inset) + 0.125rem);
		--z-ui: 10;
	}
}

@layer base {
	body {
		background: var(--bg);
		color: var(--fg);
		font-family: var(--font-mono);
		overflow-x: hidden;
	}

	#webgl_canvas {
		position: fixed;
		inset: 0;
		width: 100vw;
		height: 100vh;
		height: 100dvh;
		z-index: 0;
		pointer-events: none;
	}
}

@layer layout {
	#scroll_container {
		position: relative;
		z-index: 1;
	}

	section {
		min-height: 100vh;
	}
}

@layer ui {
	#info_panel {
		position: fixed;
		bottom: var(--ui-inset);
		right: var(--ui-inset);
		z-index: var(--z-ui);
		width: min(21rem, calc(100vw - var(--ui-inset) * 2));
		display: flex;
		flex-direction: column;
		background: var(--panel-bg);
		backdrop-filter: blur(14px) saturate(150%);
		-webkit-backdrop-filter: blur(14px) saturate(150%);
		border: var(--hairline) solid var(--panel-border);
		border-radius: 0.875rem;
		padding: 0.9rem 1.1rem;
		box-shadow: 0 0.25rem 1.875rem rgba(0, 0, 0, 0.1);
	}

	#site_title {
		margin-block-end: 0.9rem;
		font-family: var(--font-display);
		font-size: clamp(1.05rem, 1rem + 1.2vw, 1.3rem);
		line-height: 1.05;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-align: right;
		color: var(--fg);
	}

	#hud {
		text-align: right;
		font-size: 0.65rem;
		letter-spacing: 0.15em;
		color: var(--muted);
		text-transform: uppercase;

		.progress-bar {
			width: 7.5rem;
			height: var(--hairline);
			background: var(--track);
			margin-block-start: 0.5rem;
			margin-inline-start: auto;
			position: relative;
			overflow: hidden;
		}

		.progress-fill {
			position: absolute;
			inset-block: 0;
			inset-inline-start: 0;
			width: 0%;
			background: var(--accent);
			transition: width 0.1s linear;
		}

		.scene-label {
			font-size: 0.6rem;
			color: var(--accent);
			margin-block-start: 0.4rem;
		}
	}

	#scene_strip {
		position: fixed;
		left: var(--nav-x);
		top: 50%;
		translate: -50% -50%;
		z-index: var(--z-ui);
		display: flex;
		flex-direction: column;
		gap: 0.75rem;
	}

	.scene-dot {
		position: relative;
		display: block;
		width: 0.25rem;
		height: 0.25rem;
		border-radius: 50%;
		background: var(--muted);
		transition: background 0.3s, scale 0.3s;
		cursor: pointer;

		&::before {
			content: "";
			position: absolute;
			inset: -0.2rem;
		}

		&.active {
			background: var(--accent);
			scale: 1.8;
		}
	}

	#prose_.........完整代码请登录后点击上方下载按钮下载查看