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

Python正在输入中......

已于 2022-12-11 13:58:42 修改

阅读量1.7w

点赞数 23

分类专栏： Python有趣代码文章标签：前端 python 节日

于 2022-12-10 17:03:45 首次发布

本文链接：https://blog.csdn.net/veratata/article/details/128265970

版权

本文分享了两款不同风格的圣诞树代码，一款HTML版的可以自定义显示文字，另一款为Python绘制的插画风圣诞树，还介绍了如何添加音乐。

摘要由CSDN通过智能技术生成

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

文章目录

前言

前言

一年一度的圣诞节马上就要到了，看到好多程序员小伙伴已经开始炫耀自己制作的圣诞树了。今天就跟大家分享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="upload">Upload File</label>
    </li> -->
  </ul>
</div>
</div>
<!-- partial -->
  <script>
const { PI, sin, cos } = Math;
const TAU = 2 * PI;

const map = (value, sMin, sMax, dMin, dMax) => {
  return dMin + ((value - sMin) / (sMax - sMin)) * (dMax - dMin);
};

const range = (n, m = 0) =>
  Array(n)
    .fill(m)
    .map((i, j) => i + j);

const rand = (max, min = 0) => min + Math.random() * (max - min);
const randInt = (max, min = 0) => Math.floor(min + Math.random() * (max - min));
const randChoise = (arr) => arr[randInt(arr.length)];
const polar = (ang, r = 1) => [r * cos(ang), r * sin(ang)];

let scene, camera, renderer, analyser;
let step = 0;
const uniforms = {
  time: { type: "f", value: 0.0 },
  step: { type: "f", value: 0.0 },
};
const params = {
  exposure: 1,
  bloomStrength: 0.9,
  bloomThreshold: 0,
  bloomRadius: 0.5,
};
let composer;

const fftSize = 2048;
const totalPoints = 4000;

const listener = new THREE.AudioListener();

const audio = new THREE.Audio(listener);

// document.querySelector("input").addEventListener("change", uploadAudio, false);

const buttons = document.querySelectorAll(".btn");
buttons.forEach((button, index) =>
  button.addEventListener("click", () => loadAudio(index))
);

function init() {
  // const overlay = document.getElementById("overlay");
  // overlay.remove();
  content = '圣诞快乐！';
  document.getElementById("overlay").innerHTML = '<div class="center"><div class="text-center"><h1>'+content+'</h1></div></div>';

  scene = new THREE.Scene();
  renderer = new THREE.WebGLRenderer({ antialias: true });
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  document

最低0.47元/天解锁文章

Python正在输入中......

关注

23
点赞
踩
169

收藏

觉得还不错? 一键收藏
26
评论
【含源码】两种不同风格的圣诞树代码合集，其中还有可以改名字的圣诞树代码

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

扫一扫

专栏目录