【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码-Toy模板网

这篇具有很好参考价值的文章主要介绍了【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

前言

一年一度的圣诞节马上就要到了，看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享2种不同风格的圣诞树，附上完整代码，拿来即用可以按照自己的喜好来去运行使用哦。

一、可以改名字的圣诞树

大家可以在圣诞快乐这里改成自己需要的字，比如名字或者其他的祝福语。

圣诞树代码,Python有趣代码,前端,python,节日

怎么改中间的名字呢？

找到代码182行的 圣诞快乐 去改成你需要的文字内容即可

文章来源地址https://www.toymoban.com/news/detail-784825.html

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=&#

到了这里，关于【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！