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

代码语言：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;
	color: white;
	text-shadow: 0 0 5px rgba(135, 206, 250, 0.8);
	animation: snowflakes-fall linear infinite, snowflakes-shake linear infinite;
	will-change: transform;
}

@keyframes snowflakes-fall {
	0% {
		top: -10%;
	}
	100% {
		top: 100%;
	}
}

@keyframes snowflakes-shake {
	0% {
		transform: translateX(0);
	}
	25% {
		transform: translateX(-15px);
	}
	50% {
		transform: translateX(15px);
	}
	75% {
		transform: translateX(-15px);
	}
	100% {
		transform: translateX(0);
	}
}

@keyframes fadeIn {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes scaleUp {
	0% {
		transform: translateX(-50%) scale(0.5);
	}
	100% {
		transform: translateX(-50%) scale(1);
	}
}

@keyframes textGlow {
	0% {
		text-shadow: 0 0 10px #ff6f61;
	}
	100% {
		text-shadow: 0 0 10px #ff6f61, 0 0 20px #ff6f61, 0 0 30px #ff6f61,
			0 0 40px #ff0040, 0 0 70px #ff0040, 0 0 80px #ff0040, 0 0 100px #ff0040,
			0 0 150px #ff0040;
	}
}

.tree {
	position: fixed;
	bottom: 0;
	background: url("//repo.bfw.wiki/bfwrepo/icon/67541f8844bac.png");
	background-size: contain;
	background-repeat: no-repeat;
	image-rendering: pixelated;
	z-index: 998;
	transform-origin: bottom center;
	animation: treeSwaying 4s ease-in-out infinite;
}

@keyframes treeSwaying {
	0%,
	100% {
		transform: rotate(0deg);
	}
	50% {
		transform: rotate(4deg);
	}
}
</style>
<link href="https://fonts.googleapis.com/css2?family=Mountains+of+Christmas:wght@700&display=swap" rel="stylesheet">
  
<.........完整代码请登录后点击上方下载按钮下载查看