div+css实现带音效火车穿越山洞动画代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：div+css实现带音效火车穿越山洞动画代码

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

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

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

  
<style>
:root {
	--sky-top: #6ca9ff;
	--sky-mid: #9fd2ff;
	--sky-bottom: #eef8ff;
	--ground-top: #2f6946;
	--ground-bottom: #1d3f2c;
	--bridge-steel: #3f4755;
	--bridge-light: #737c8b;
	--mist: rgba(255, 255, 255, 0.17);
	--tunnel-rim: #515866;
}

* {
	box-sizing: border-box;
}

html,
body {
	width: 100%;
	height: 100%;
	margin: 0;
	background: radial-gradient(
		circle at top,
		#243148 0%,
		#121927 48%,
		#0b1018 100%
	);
	font-family: Arial, sans-serif;
}

body {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	overflow: hidden;
}

.scene-wrap {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 14px;
}

.scene-card {
	position: relative;
	width: 650px;
	height: 400px;
	max-width: calc(100vw - 48px);
	max-height: calc(100vh - 48px);
	aspect-ratio: 13 / 8;
	border-radius: 24px;
	overflow: hidden;
	container-type: size;
	background: #0f1624;
	box-shadow: 0 28px 60px rgba(0, 0, 0, 0.45),
		0 0 0 1px rgba(255, 255, 255, 0.08) inset, 0 18px 30px rgba(0, 0, 0, 0.22);
}

.scene-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	pointer-events: none;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
	z-index: 100;
}

.entry-label {
	font-family: Arial, sans-serif;
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
	text-align: center;
	line-height: 1.4;
	max-width: calc(100vw - 48px);
	text-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
}

.scene {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden;
	background: radial-gradient(
			circle at 50% 25%,
			rgba(255, 232, 173, 0.55),
			transparent 22%
		),
		linear-gradient(
			to bottom,
			var(--sky-top) 0%,
			var(--sky-mid) 45%,
			var(--sky-bottom) 100%
		);
}

.sun {
	position: absolute;
	width: min(16cqw, 170px);
	height: min(16cqw, 170px);
	top: 7cqh;
	left: 50%;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(
		circle at 35% 35%,
		#fff9dd 0%,
		#ffeab2 35%,
		#ffd77c 70%,
		rgba(255, 215, 124, 0.1) 100%
	);
	box-shadow: 0 0 60px rgba(255, 217, 124, 0.55),
		0 0 140px rgba(255, 217, 124, 0.2);
	z-index: 1;
}

.stars,
.clouds,
.sleepers,
.bridge-panels {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.star {
	position: absolute;
	width: 2px;
	height: 2px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.8);
	animation: twinkle 3.5s ease-in-out infinite;
}

@keyframes twinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.7);
	}
	50% {
		opacity: 0.95;
		transform: scale(1.35);
	}
}

.cloud {
	position: absolute;
	width: clamp(120px, 14cqw, 240px);
	height: clamp(40px, 4cqw, 72px);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	filter: blur(1px);
	animation: drift linear infinite;
}

.cloud::before,
.cloud::after {
	content: "";
	position: absolute;
	background: inherit;
	border-radius: inherit;
}

.cloud::before {
	width: 48%;
	height: 90%;
	left: 10%;
	top: -28%;
}

.cloud::after {
	width: 36%;
	height: 72%;
	right: 12%;
	top: -18%;
}

@keyframes drift {
	from {
		transform: translateX(-24cqw);
	}
	to {
		transform: translateX(124cqw);
	}
}

.cloud-bg {
	position: absolute;
	left: -8cqw;
	right: -8cqw;
	top: 33%;
	height: 27cqh;
	z-index: 5;
	opacity: 0.8;
	pointer-events: none;
	background: radial-gradient(
			ellipse at 50% 100%,
			rgba(228, 239, 243, 0.34) 0%,
			rgba(228, 239, 243, 0.14) 42%,
			rgba(228, 239, 243, 0) 72%
		),
		linear-gradient(
			to bottom,
			rgba(228, 239, 243, 0) 0%,
			rgba(228, 239, 243, 0.14) 34%,
			rgba(228, 239, 243, 0.56) 100%
		);
	filter: blur(1.2px);
}

.cloud-bg::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 72%;
	height: 12cqh;
	background: radial-gradient(circle at 6% 90%, #e4eff3 0 17%, transparent 18%),
		radial-gradient(circle at 15% 100%, #e4eff3 0 20%, transparent 21%),
		radial-gradient(circle at 27% 92%, #dbe9ef 0 16%, transparent 17%),
		radial-gradient(circle at 39% 98%, #e4eff3 0 22%, transparent 23%),
		radial-gradient(circle at 52% 100%, #e4eff3 0 18%, transparent 19%),
		radial-gradient(circle at 65% 93%, #d7e5ec 0 19%, transparent 20%),
		radial-gradient(circle at 78% 100%, #e4eff3 0 21%, transparent 22%),
		radial-gradient(circle at 91% 96%, #e4eff3 0 17%, transparent 18%);
	opacity: 0.92;
	filter: blur(0.4px);
}

.mountain-back,
.mountain {
	position: absolute;
	bottom: 15cqh;
	overflow: hidden;
}

.mountain-back {
	z-index: 10;
	filter: saturate(0.88);
}

.mountain {
	z-index: 12;
	box-shadow: inset 0 -1.4cqh 0 rgba(11, 18, 28, 0.14);
}

.mountain-back.left {
	left: -10cqw;
	width: 46cqw;
	height: 35cqh;
	background: linear-gradient(135deg, #b4c.........完整代码请登录后点击上方下载按钮下载查看