css+js实现带音乐的圣诞节下雪动画效果代码-html代码-BFW代码库

css+js实现带音乐的圣诞节下雪动画效果代码

代码语言：html

所属分类：动画

代码描述：css+js实现带音乐的圣诞节下雪动画效果代码

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

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

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


  
  
<style>
body {
	margin: 0;
	overflow: hidden;
	background: #0a192f;
	position: relative;
}

.crt-effect {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.25) 50%),
		linear-gradient(
			90deg,
			rgba(255, 0, 0, 0.06),
			rgba(0, 255, 0, 0.02),
			rgba(0, 0, 255, 0.06)
		);
	background-size: 100% 2px, 3px 100%;
	pointer-events: none;
	z-index: 1002;
}

.title {
	position: fixed;
	top: 50px;
	left: 50%;
	transform: translateX(-50%);
	font-family: "Mountains of Christmas", cursive;
	font-size: 5em;
	text-align: center;
	color: #ff6f61;
	text-shadow: 0 0 7px #ff6f61, 0 0 10px #ff6f61, 0 0 21px #ff6f61,
		0 0 42px #ff0040, 0 0 82px #ff0040, 0 0 92px #ff0040, 0 0 102px #ff0040,
		0 0 151px #ff0040;
	z-index: 1001;
	letter-spacing: 5px;
	font-weight: bold;
	opacity: 0;
	animation: fadeIn 2s forwards, scaleUp 2s forwards, textGlow 2s forwards,
		christmasColors 4s infinite;
}

@keyframes christmasColors {
	0%,
	100% {
		color: #ff6f61;
	}
	25% {
		color: #ffcc00;
	}
	50% {
		color: #00cc99;
	}
	75% {
		color: #ff6f61;
	}
}

.music-btn {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 30px 60px;
	font-size: 1.8em;
	font-family: "Mountains of Christmas", cursive;
	font-weight: bold;
	background: linear-gradient(
		45deg,
		rgba(255, 68, 68, 0.2),
		rgba(255, 0, 64, 0.3)
	);
	color: white;
	border: 4px solid white;
	border-radius: 50px;
	cursor: pointer;
	transition: all 0.4s ease;
	z-index: 1003;
	text-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
	box-shadow: 0 0 20px rgba(255, 255, 255, 0.4),
		inset 0 0 20px rgba(255, 255, 255, 0.4);
	backdrop-filter: blur(8px);
}

.music-btn:hover {
	background: linear-gradient(
		45deg,
		rgba(255, 68, 68, 0.4),
		rgba(255, 0, 64, 0.5)
	);
	transform: translate(-50%, -50%) scale(1.05);
}

.music-btn span {
	display: inline-block;
	animation: bounce 0.8s ease infinite;
}

@keyframes bounce {
	0%,
	100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-5px);
	}
}

.particle {
	position: absolute;
	border-radius: 50%;
	pointer-events: none;
	background: radial-gradient(
		circle at center,
		rgba(135, 206, 250, 0.8) 0%,
		rgba(135, 206, 250, 0) 70%
	);
	animation: fall linear infinite;
}

.snow-pile {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 0;
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 0%,
		rgba(255, 255, 255, 0.4) 40%,
		rgba(255, 255, 255, 0.8) 80%,
		rgba(255, 255, 255, 0.9) 100%
	);
	transition: height 2s ease-out;
	pointer-events: none;
	filter: blur(8px);
	z-index: 999;
}

@keyframes fall {
	0% {
		transform: translateY(-100vh) translateX(0) rotate(0deg);
		opacity: 1;
	}
	100% {
		transform: translateY(110vh) translateX(20px) rotate(360deg);
		opacity: 0;
	}
}

.snowflake {
	position: fixed;
	c.........完整代码请登录后点击上方下载按钮下载查看