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(
		4.........完整代码请登录后点击上方下载按钮下载查看