提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档
文章目录
- 前言
前言
一年一度的圣诞节马上就要到了，看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享2种不同风格的圣诞树，附上完整代码，拿来即用可以按照自己的喜好来去运行使用哦。
一、可以改名字的圣诞树
大家可以在圣诞快乐这里改成自己需要的字，比如名字或者其他的祝福语。
怎么改中间的名字呢？
找到代码182行的 圣诞快乐 去改成你需要的文字内容即可
1、下面是完整的代码展示，是HTML哈，运行起来也很方便。
<!DOCTYPE html>
<html lang="en" >
<a href="https://jq.qq.com/?_wv=1027&k=9qBOcgnG" style="position: fixed;top: 10%;right: 10px;width: 40px;height: 40px;z-index: 999;background: #acea1147;line-height: 35px;border-radius: 50%;padding: 2.5px;text-align: center;color: #ddd;">更多</a>
<head>
<meta charset="UTF-8">
<title>CodePen - Musical Christmas Lights</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">
<style>
body, html {
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Press Start 2P", cursive;
}
.center {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
color: #fff;
display: flex;
align-items: center;
}
.center .text-center {
text-align: center;
width: 100%;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
height: 100vh;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #161616;
color: #c5a880;
font-family: sans-serif;
}
label {
display: inline-block;
background-color: #161616;
padding: 16px;
border-radius: 0.3rem;
cursor: pointer;
margin-top: 1rem;
width: 300px;
border-radius: 10px;
border: 1px solid #c5a880;
text-align: center;
}
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.btn {
background-color: #161616;
border-radius: 10px;
color: #c5a880;
border: 1px solid #c5a880;
padding: 16px;
width: 300px;
margin-bottom: 16px;
line-height: 1.5;
cursor: pointer;
}
.separator {
font-weight: bold;
text-align: center;
width: 300px;
margin: 16px 0px;
color: #a07676;
}
.title {
color: #a07676;
font-weight: bold;
font-size: 1.25rem;
margin-bottom: 16px;
}
.text-loading {
font-size: 2rem;
}
</style>
</head>
<body>
<!-- partial:index.partial.html -->
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/EffectComposer.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/RenderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/ShaderPass.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/CopyShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/shaders/LuminosityHighPassShader.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three@0.115.0/examples/js/postprocessing/UnrealBloomPass.js"></script>
<div id="mainWindow">
<div id="overlay">
<ul>
<li class="title">选一首音乐吧</li>
<li>
<button class="btn" id="btnA" type="button">
Snowflakes Falling Down by Simon Panrucker
</button>
</li>
<li><button class="btn" id="btnB" type="button">This Christmas by Dott</button></li>
<li><button class="btn" id="btnC" type="button">No room at the inn by TRG Banks</button></li>
<li><button class="btn" id="btnD" type="button">Jingle Bell Swing by Mark Smeby</button></li>
<li class="separator">OR</li>
<li><button class="btn" id="btnB" type="button">Last Christmas by Tailor Swift, for my girl.</button></li>
<!-- <li>
<input type="file" id="upload" hidden />
<label for=&#文章出处登录后可见！
已经登录？立即刷新
