<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>千锋大前端-纯css圣诞树动画特效代码</title>
<link rel="stylesheet" href="./style.css" />
</head>
<body>
<!-- partial:index.partial.html -->
<ul class="star">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<ul>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
<li class="snow"></li>
</ul>
<div class="music">
<audio src="./m.m4a"></audio>
</div>
<script>
// 音乐控制
const musicBox = document.querySelector('.music')
const audio = musicBox.querySelector('audio')
let flag = true
musicBox.onclick = function () {
this.classList.toggle('active')
flag ? audio.play() : audio.pause()
flag = !flag
}
</script>
</body>
</html>
