圣诞树HTML5合集

沉默寡言的小柴

已于 2023-11-25 11:08:20 修改

阅读量593

点赞数 1

文章标签： html5 html css

于 2022-12-08 22:04:39 首次发布

本文链接：https://blog.csdn.net/qq_45040187/article/details/128244345

版权

大家可以先建立一个txt档的文件，然后复制源码后，把文档的后缀修改为html，即可。欢迎大家讨论，谢谢！(数据来源于网络)，喝水不忘挖井人，感谢各位前辈的努力！

1.源码如下：

<!DOCTYPE html>

<head>

<style>

.s1{

width: 0px;

height: 0px;

border-color: transparent;

border-bottom-color: rgb(24, 232, 59);

border-width: 50px;

border-style: solid;

margin: 0 auto;

}

.s2{

width: 0px;

height: 0px;

border-color: transparent;

border-bottom-color: rgb(24, 232, 59);

border-width: 70px;

border-style: solid;

margin: -70px auto 0;

}

.s3{

width: 0px;

height: 0px;

border-color: transparent;

border-bottom-color: rgb(24, 232, 59);

border-width: 90px;

border-style: solid;

margin: -90px auto 0;

}

.s4{

width: 20px;

height: 40px;

background-color: brown;

margin: 0px auto ;

}

</style>

</head>

<body>

</body>

</html>

2.源码如下：

<!DOCTYPE html>
<html lang="en" >

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>

<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">或者</li>
<li>
<input type="file" id="upload" hidden />
<label for="upload">Upload File</label>
</li>
</ul>
</div>

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();

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

camera = new THREE.PerspectiveCamera(
60,
window.innerWidth / window.innerHeight,
1,
1000);

camera.position.set(-0.09397456774197047, -2.5597086635726947, 24.420789670889008);
camera.rotation.set(0.10443543723052419, -0.003827152981119352, 0.0004011488708739715);

const format = renderer.capabilities.isWebGL2 ?
THREE.RedFormat :
THREE.LuminanceFormat;

uniforms.tAudioData = {
value: new THREE.DataTexture(analyser.data, fftSize / 2, 1, format) };

addPlane(scene, uniforms, 3000);
addSnow(scene, uniforms);

range(10).map(i => {
addTree(scene, uniforms, totalPoints, [20, 0, -20 * i]);
addTree(scene, uniforms, totalPoints, [-20, 0, -20 * i]);
});

const renderScene = new THREE.RenderPass(scene, camera);

const bloomPass = new THREE.UnrealBloomPass(
new THREE.Vector2(window.innerWidth, window.innerHeight),
1.5,
0.4,
0.85);

bloomPass.threshold = params.bloomThreshold;
bloomPass.strength = params.bloomStrength;
bloomPass.radius = params.bloomRadius;

composer = new THREE.EffectComposer(renderer);
composer.addPass(renderScene);
composer.addPass(bloomPass);

addListners(camera, renderer, composer);
animate();
}

function animate(time) {
analyser.getFrequencyData();
uniforms.tAudioData.value.needsUpdate = true;
step = (step + 1) % 1000;
uniforms.time.value = time;
uniforms.step.value = step;
composer.render();
requestAnimationFrame(animate);
}

function loadAudio(i) {
document.getElementById("overlay").innerHTML =
'<div class="text-loading">正在下载音乐，请稍等...</div>';
const files = [
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Simon_Panrucker/Happy_Christmas_You_Guys/Simon_Panrucker_-_01_-_Snowflakes_Falling_Down.mp3",
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/no_curator/Dott/This_Christmas/Dott_-_01_-_This_Christmas.mp3",
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/TRG_Banks/TRG_Banks_Christmas_Album/TRG_Banks_-_12_-_No_room_at_the_inn.mp3",
"https://files.freemusicarchive.org/storage-freemusicarchive-org/music/ccCommunity/Mark_Smeby/En_attendant_Nol/Mark_Smeby_-_07_-_Jingle_Bell_Swing.mp3"];

const file = files[i];

const loader = new THREE.AudioLoader();
loader.load(file, function (buffer) {
audio.setBuffer(buffer);
audio.play();
analyser = new THREE.AudioAnalyser(audio, fftSize);
init();
});

}

function uploadAudio(event) {
document.getElementById("overlay").innerHTML =
'<div class="text-loading">请稍等...</div>';
const files = event.target.files;
const reader = new FileReader();

reader.onload = function (file) {
var arrayBuffer = file.target.result;

listener.context.decodeAudioData(arrayBuffer, function (audioBuffer) {
audio.setBuffer(audioBuffer);
audio.play();
analyser = new THREE.AudioAnalyser(audio, fftSize);
init();
});
};

reader.readAsArrayBuffer(files[0]);
}

function addTree(scene, uniforms, totalPoints, treePosition) {
const vertexShader = `
attribute float mIndex;
varying vec3 vColor;
varying float opacity;
uniform sampler2D tAudioData;

float norm(float value, float min, float max ){
return (value - min) / (max - min);
}
float lerp(float norm, float min, float max){
return (max - min) * norm + min;
}

float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
}

void main() {
vColor = color;
vec3 p = position;
vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );
float amplitude = texture2D( tAudioData, vec2( mIndex, 0.1 ) ).r;
float amplitudeClamped = clamp(amplitude-0.4,0.0, 0.6 );
float sizeMapped = map(amplitudeClamped, 0.0, 0.6, 1.0, 20.0);
opacity = map(mvPosition.z , -200.0, 15.0, 0.0, 1.0);
gl_PointSize = sizeMapped * ( 100.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;
}
`;
const fragmentShader = `
varying vec3 vColor;
varying float opacity;
uniform sampler2D pointTexture;
void main() {
gl_FragColor = vec4( vColor, opacity );
gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
}
`;
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
...uniforms,
pointTexture: {
value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } },

vertexShader,
fragmentShader,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true,
vertexColors: true });

const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const sizes = [];
const phases = [];
const mIndexs = [];

const color = new THREE.Color();

for (let i = 0; i < totalPoints; i++) {
const t = Math.random();
const y = map(t, 0, 1, -8, 10);
const ang = map(t, 0, 1, 0, 6 * TAU) + TAU / 2 * (i % 2);
const [z, x] = polar(ang, map(t, 0, 1, 5, 0));

const modifier = map(t, 0, 1, 1, 0);
positions.push(x + rand(-0.3 * modifier, 0.3 * modifier));
positions.push(y + rand(-0.3 * modifier, 0.3 * modifier));
positions.push(z + rand(-0.3 * modifier, 0.3 * modifier));

color.setHSL(map(i, 0, totalPoints, 1.0, 0.0), 1.0, 0.5);

colors.push(color.r, color.g, color.b);
phases.push(rand(1000));
sizes.push(1);
const mIndex = map(i, 0, totalPoints, 1.0, 0.0);
mIndexs.push(mIndex);
}

geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(positions, 3).setUsage(
THREE.DynamicDrawUsage));

geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
geometry.setAttribute("mIndex", new THREE.Float32BufferAttribute(mIndexs, 1));

const tree = new THREE.Points(geometry, shaderMaterial);

const [px, py, pz] = treePosition;

tree.position.x = px;
tree.position.y = py;
tree.position.z = pz;

scene.add(tree);
}

function addSnow(scene, uniforms) {
const vertexShader = `
attribute float size;
attribute float phase;
attribute float phaseSecondary;

varying vec3 vColor;
varying float opacity;

uniform float time;
uniform float step;

float norm(float value, float min, float max ){
return (value - min) / (max - min);
}
float lerp(float norm, float min, float max){
return (max - min) * norm + min;
}

float map(float value, float sourceMin, float sourceMax, float destMin, float destMax){
return lerp(norm(value, sourceMin, sourceMax), destMin, destMax);
}
void main() {
float t = time* 0.0006;

vColor = color;

vec3 p = position;

p.y = map(mod(phase+step, 1000.0), 0.0, 1000.0, 25.0, -8.0);

p.x += sin(t+phase);
p.z += sin(t+phaseSecondary);

opacity = map(p.z, -150.0, 15.0, 0.0, 1.0);

vec4 mvPosition = modelViewMatrix * vec4( p, 1.0 );

gl_PointSize = size * ( 100.0 / -mvPosition.z );

gl_Position = projectionMatrix * mvPosition;

}
`;

const fragmentShader = `
uniform sampler2D pointTexture;
varying vec3 vColor;
varying float opacity;

void main() {
gl_FragColor = vec4( vColor, opacity );
gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );
}
`;
function createSnowSet(sprite) {
const totalPoints = 300;
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
...uniforms,
pointTexture: {
value: new THREE.TextureLoader().load(sprite) } },

vertexShader,
fragmentShader,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true,
vertexColors: true });

const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const sizes = [];
const phases = [];
const phaseSecondaries = [];

const color = new THREE.Color();

for (let i = 0; i < totalPoints; i++) {
const [x, y, z] = [rand(25, -25), 0, rand(15, -150)];
positions.push(x);
positions.push(y);
positions.push(z);

color.set(randChoise(["#f1d4d4", "#f1f6f9", "#eeeeee", "#f1f1e8"]));

colors.push(color.r, color.g, color.b);
phases.push(rand(1000));
phaseSecondaries.push(rand(1000));
sizes.push(rand(4, 2));
}

geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(positions, 3));

geometry.setAttribute("color", new THREE.Float32BufferAttribute(colors, 3));
geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));
geometry.setAttribute("phase", new THREE.Float32BufferAttribute(phases, 1));
geometry.setAttribute(
"phaseSecondary",
new THREE.Float32BufferAttribute(phaseSecondaries, 1));

const mesh = new THREE.Points(geometry, shaderMaterial);

scene.add(mesh);
}
const sprites = [
"https://assets.codepen.io/3685267/snowflake1.png",
"https://assets.codepen.io/3685267/snowflake2.png",
"https://assets.codepen.io/3685267/snowflake3.png",
"https://assets.codepen.io/3685267/snowflake4.png",
"https://assets.codepen.io/3685267/snowflake5.png"];

sprites.forEach(sprite => {
createSnowSet(sprite);
});
}

function addPlane(scene, uniforms, totalPoints) {
const vertexShader = `
attribute float size;
attribute vec3 customColor;
varying vec3 vColor;

void main() {
vColor = customColor;
vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
gl_PointSize = size * ( 300.0 / -mvPosition.z );
gl_Position = projectionMatrix * mvPosition;

}
`;
const fragmentShader = `
uniform vec3 color;
uniform sampler2D pointTexture;
varying vec3 vColor;

void main() {
gl_FragColor = vec4( vColor, 1.0 );
gl_FragColor = gl_FragColor * texture2D( pointTexture, gl_PointCoord );

}
`;
const shaderMaterial = new THREE.ShaderMaterial({
uniforms: {
...uniforms,
pointTexture: {
value: new THREE.TextureLoader().load(`https://assets.codepen.io/3685267/spark1.png`) } },

vertexShader,
fragmentShader,
blending: THREE.AdditiveBlending,
depthTest: false,
transparent: true,
vertexColors: true });

const geometry = new THREE.BufferGeometry();
const positions = [];
const colors = [];
const sizes = [];

const color = new THREE.Color();

for (let i = 0; i < totalPoints; i++) {
const [x, y, z] = [rand(-25, 25), 0, rand(-150, 15)];
positions.push(x);
positions.push(y);
positions.push(z);

color.set(randChoise(["#93abd3", "#f2f4c0", "#9ddfd3"]));

colors.push(color.r, color.g, color.b);
sizes.push(1);
}

geometry.setAttribute(
"position",
new THREE.Float32BufferAttribute(positions, 3).setUsage(
THREE.DynamicDrawUsage));

geometry.setAttribute(
"customColor",
new THREE.Float32BufferAttribute(colors, 3));

geometry.setAttribute("size", new THREE.Float32BufferAttribute(sizes, 1));

const plane = new THREE.Points(geometry, shaderMaterial);

plane.position.y = -8;
scene.add(plane);
}

window.addEventListener(
"resize",
() => {
const width = window.innerWidth;
const height = window.innerHeight;

camera.aspect = width / height;
camera.updateProjectionMatrix();

renderer.setSize(width, height);
composer.setSize(width, height);
},
false);

}
</script>

</body>

</html>

3.源码如下：

<!DOCTYPE html>
<html>
<head>
<title>圣诞节圣诞树</title>
<meta charset="utf-8">
<style>
*{
text-align:center;
}
html, body { width: 100%; height: 100%; margin: 0; padding: 0; border: 0; }
div { margin: 0; padding: 0; border: 0; }
.nav {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 27px;
background-color: white;
color: black;
text-align: center;
line-height: 25px;
}
a { color: black; text-decoration: none; border-bottom: 1px dashed black; }
a:hover { border-bottom: 1px solid red; }
.previous { float: left; margin-left: 10px; }
.next { float: right; margin-right: 10px; }
.green { color: green; }
.red { color: red; }
textarea { width: 100%; height: 100%; border: 0; padding: 0; margin: 0; padding-bottom: 20px; }
.block-outer { float: left; width: 22%; height: 100%; padding: 5px; border-left: 1px solid black; margin: 30px 3px 3px 3px; }
.block-inner { height: 68%; }
.one { border: 0; }
</style>
</head>
<body marginwidth="0" marginheight="0">
<h1>专属圣诞树</h1>
<canvas id="c" height="356" width="446">
<script>
var collapsed = true;
function toggle() {
var fs = top.document.getElementsByTagName('frameset')[0];
var f = fs.getElementsByTagName('frame');
if (collapsed) {
fs.rows = '250px,*';
// enable resizing of frames in firefox/opera
fs.noResize = false;
f[0].noResize = false;
f[1].noResize = false;
} else {
fs.rows = '30px,*';
// disable resizing of frames in firefox/opera
fs.noResize = true;
f[0].noResize = true;
f[1].noResize = true;
}
collapsed = !collapsed;
}
</script>
<script>
var b = document.body;
var c = document.getElementsByTagName('canvas')[0];
var a = c.getContext('2d');
document.body.clientWidth; // fix bug in chrome.
</script>
<script>
// start of submission //
M=Math;Q=M.random;J=[];U=16;T=M.sin;E=M.sqrt;for(O=k=0;x=z=j=i=k<200;)with(M[k]=k?c.cloneNode(0):c){width=height=k?32:W=446;with(getContext('2d'))if(k>10|!k)for(font='60px Impact',V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)':V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;)beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1)));else for(;x=T(i),y=Q()*2-1,D=x*x+y*y,B=E(D-x/.9-1.5*y+1),R=67*(B+1)*(L=k/9+.8)>>1,i++<W;)if(D<1)beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'),moveTo(U+x*8,U+y*8),lineTo(U+x*U,U+y*U),stroke();for(y=H=k+E(k++)*25,R=Q()*W;P=3,j<H;)J[O++]=[x+=T(R)*P+Q()*6-3,y+=Q()*U-8,z+=T(R-11)*P+Q()*6-3,j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1]}setInterval(function G(m,l){A=T(D-11);if(l)return(m[2]-l[2])*A+(l[0]-m[0])*T(D);a.clearRect(0,0,W,W);J.sort(G);for(i=0;L=J[i++];a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)){if(i==2e3)a.fillText('Merry Christmas!',U,345);if(!(i%7))a.drawImage(M[13],((157*(i*i)+T(D*5+i*i)*5)%W)>>0,((113*i+(D*i)/60)%(290+i/99))>>0);}D+=.02},1)
// end of submission //
</script>
</canvas>
</body>
</html>

4.源码如下：

<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<title>Codepen-challenge-christmas-tree</title>
</head>

<body>
<ul class="bgg">
<li class="sphere"></li>
<p class="text">亲爱滴姐妹~圣诞快乐</p>
</ul>
<ul class="tree">
<li class="top-star"> </li>
<li class="top">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
<li class="middle first">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
<li class="middle second">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
<li class="middle third">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
<li class="bottom outer">
<ul class="tree-pts">
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts left"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
<li class="pts right"></li>
</ul>
</li>
<li class="stem">
<ul class="tree-stem">
<li class="stem"></li>
<li class="gift g1"></li>
<li class="gift g2"></li>
<li class="gift g3"></li>
<li class="gift g4"></li>
<li class="gift g5"></li>
<li class="gift g6"></li>
<li class="gift g7"></li>
<li class="gift g8"></li>
<li class="gift g9"></li>
<li class="shadow"></li>
</ul>
</li>
</ul>
<ul class="toys">
<li class="star"></li>
<li class="ball b1"></li>
<li class="ball b2"></li>
<li class="ball b3"></li>
<li class="ball b4"></li>
<li class="ball b5"></li>
<li class="ball b6"></li>
<li class="ball b7"></li>
<li class="ball b8"></li>
<li class="ball b9"></li>
<li class="ball b10"></li>
<li class="ball b11"></li>
<li class="ball b12"></li>
<li class="ball b13"></li>
<li class="ball b14"></li>
<li class="ball b15"></li>
<li class="ball b16"></li>
<li class="ball b17"></li>
<li class="ball b18"></li>
<li class="ball b19"></li>
<li class="ball b20"></li>
<li class="light l1"></li>
<li class="light l2"></li>
<li class="light l3"></li>
<li class="light l4"></li>
<li class="light l5"></li>
<li class="light l6"></li>
<li class="light l7"></li>
<li class="light l8"></li>
<li class="light l9"></li>
<li class="light l10"></li>
<li class="light l11"></li>
<li class="light l12"></li>
<li class="light l13"></li>
<li class="light l14"></li>
<li class="light l15"></li>
<li class="light l16"></li>
<li class="light l17"></li>
<li class="light l18"></li>
<li class="light l19"></li>
<li class="light l20"></li>
<li class="light l21"></li>
<li class="light l22"></li>
<li class="light l23"></li>
<li class="light l24"></li>
<li class="light l25"></li>
</ul>
</body>
<style>
.text {
color: whitesmoke;
font-size: 45px;
text-align: center;
font-family: 'Fantasy';
text-shadow: 5px 5px 5px yellow;
}

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #020024;
}

.bgg {
position: fixed;
display: grid;
align-content: center;
z-index: 1;
height: 100vh;
left: 50%;
margin-left: -315px;
}

.bgg li.sphere {
width: 650px;
height: 650px;
background: #020024;
background: radial-gradient(rgba(2, 0, 36, 0.5) 47%, rgba(108, 108, 142, 0.7) 51%, rgba(171, 171, 255, 0.7) 52%, #020024 53%);
}

ul {
list-style-type: none;
}

.tree {
z-index: 2;
position: fixed;
left: 50%;
margin-left: -160px;
display: grid;
height: 97vh;
align-content: center;
grid-template-areas: ". tree-top ."". tree-middle ."". tree-bottom ."". tree-stem .";
grid-template-columns: 100px auto 100px;
transform: rotateY(50deg) scaley(1.5);
}

.tree>li {
position: relative;
display: block;
}

.tree .top,
.tree .top-star {
grid-area: tree-top;
}

.tree .top li,
.tree .top-star li {
border-color: green;
}

.tree .top-star {
grid-area: tree-top;
width: 130px;
height: 55px;
position: absolute;
background-color: #fff;
border-radius: 50%;
top: -48px;
z-index: 10;
left: 4px;
animation: starLight 1.5s ease-out infinite alternate;
}

.tree .middle {
grid-area: tree-middle;
}

.tree .bottom {
grid-area: tree-bottom;
}

.tree .stem {
grid-area: tree-stem;
}

.tree .tree-pts {
margin: 0 auto;
display: flex;
justify-content: center;
}

.tree .tree-pts .pts {
top: 0;
position: absolute;
}

.tree li:nth-of-type(1) .pts {
border-left: 10px solid #049c04;
z-index: calc(8 - 1);
}

.tree li:nth-of-type(2) .pts {
border-left: 10px solid #13a313;
z-index: calc(8 - 2);
}

.tree li:nth-of-type(3) .pts {
border-left: 10px solid #067806;
z-index: calc(8 - 3);
}

.tree li:nth-of-type(4) .pts {
border-left: 10px solid #0f6b0f;
z-index: calc(8 - 4);
}

.tree li:nth-of-type(5) .pts {
border-left: 10px solid #0f5f0f;
z-index: calc(8 - 5);
}

.tree li:nth-of-type(6) .pts {
border-left: 10px solid #0f4f0f;
z-index: calc(8 - 6);
}

.tree li:nth-of-type(7) .stem {
border-bottom-color: #0f4f0f;
z-index: calc(8 - 7);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(1) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(219.5deg) rotatey(28.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(2) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(218.5deg) rotatey(36.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(3) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(217.5deg) rotatey(44.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(4) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(216.5deg) rotatey(52.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(5) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(215.5deg) rotatey(60.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(6) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(214.5deg) rotatey(68.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(7) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(213.5deg) rotatey(76.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(8) {
width: 1.7em;
height: 2em;
border-radius: 100% 0 0 0;
transform: rotate(212.5deg) rotatey(84.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(9) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-40.5deg) rotatey(28.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(10) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-41.5deg) rotatey(37deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(11) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-42.5deg) rotatey(45.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(12) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-43.5deg) rotatey(54deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(13) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-44.5deg) rotatey(62.5deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(14) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-45.5deg) rotatey(71deg) translateX(4em);
}

.tree li:nth-child(1) .tree-pts .pts:nth-of-type(15) {
width: 1.7em;
height: 2em;
border-radius: 0 0 0 100%;
transform: rotate(-46.5deg) rotatey(79.5deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(1) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(220deg) rotatey(29deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(2) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(219deg) rotatey(37deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(3) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(218deg) rotatey(45deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(4) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(217deg) rotatey(53deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(5) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(216deg) rotatey(61deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(6) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(215deg) rotatey(69deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(7) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(214deg) rotatey(77deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(8) {
width: 3.4em;
height: 4em;
border-radius: 100% 0 0 0;
transform: rotate(213deg) rotatey(85deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(9) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-40deg) rotatey(29deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(10) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-41deg) rotatey(38deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(11) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-42deg) rotatey(47deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(12) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-43deg) rotatey(56deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(13) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-44deg) rotatey(65deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(14) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-45deg) rotatey(74deg) translateX(4em);
}

.tree li:nth-child(2) .tree-pts .pts:nth-of-type(15) {
width: 3.4em;
height: 4em;
border-radius: 0 0 0 100%;
transform: rotate(-46deg) rotatey(83deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(1) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(220.5deg) rotatey(29.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(2) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(219.5deg) rotatey(37.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(3) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(218.5deg) rotatey(45.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(4) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(217.5deg) rotatey(53.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(5) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(216.5deg) rotatey(61.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(6) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(215.5deg) rotatey(69.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(7) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(214.5deg) rotatey(77.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(8) {
width: 5.1em;
height: 6em;
border-radius: 100% 0 0 0;
transform: rotate(213.5deg) rotatey(85.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(9) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-39.5deg) rotatey(29.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(10) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-40.5deg) rotatey(39deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(11) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-41.5deg) rotatey(48.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(12) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-42.5deg) rotatey(58deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(13) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-43.5deg) rotatey(67.5deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(14) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-44.5deg) rotatey(77deg) translateX(4em);
}

.tree li:nth-child(3) .tree-pts .pts:nth-of-type(15) {
width: 5.1em;
height: 6em;
border-radius: 0 0 0 100%;
transform: rotate(-45.5deg) rotatey(86.5deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(1) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(221deg) rotatey(30deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(2) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(220deg) rotatey(38deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(3) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(219deg) rotatey(46deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(4) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(218deg) rotatey(54deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(5) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(217deg) rotatey(62deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(6) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(216deg) rotatey(70deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(7) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(215deg) rotatey(78deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(8) {
width: 6.8em;
height: 8em;
border-radius: 100% 0 0 0;
transform: rotate(214deg) rotatey(86deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(9) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-39deg) rotatey(30deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(10) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-40deg) rotatey(40deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(11) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-41deg) rotatey(50deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(12) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-42deg) rotatey(60deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(13) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-43deg) rotatey(70deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(14) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-44deg) rotatey(80deg) translateX(4em);
}

.tree li:nth-child(4) .tree-pts .pts:nth-of-type(15) {
width: 6.8em;
height: 8em;
border-radius: 0 0 0 100%;
transform: rotate(-45deg) rotatey(90deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(1) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(221.5deg) rotatey(30.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(2) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(220.5deg) rotatey(38.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(3) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(219.5deg) rotatey(46.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(4) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(218.5deg) rotatey(54.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(5) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(217.5deg) rotatey(62.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(6) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(216.5deg) rotatey(70.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(7) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(215.5deg) rotatey(78.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(8) {
width: 8.5em;
height: 10em;
border-radius: 100% 0 0 0;
transform: rotate(214.5deg) rotatey(86.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(9) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-38.5deg) rotatey(30.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(10) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-39.5deg) rotatey(41deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(11) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-40.5deg) rotatey(51.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(12) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-41.5deg) rotatey(62deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(13) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-42.5deg) rotatey(72.5deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(14) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-43.5deg) rotatey(83deg) translateX(4em);
}

.tree li:nth-child(5) .tree-pts .pts:nth-of-type(15) {
width: 8.5em;
height: 10em;
border-radius: 0 0 0 100%;
transform: rotate(-44.5deg) rotatey(93.5deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(1) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(222deg) rotatey(31deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(2) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(221deg) rotatey(39deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(3) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(220deg) rotatey(47deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(4) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(219deg) rotatey(55deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(5) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(218deg) rotatey(63deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(6) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(217deg) rotatey(71deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(7) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(216deg) rotatey(79deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(8) {
width: 10.2em;
height: 12em;
border-radius: 100% 0 0 0;
transform: rotate(215deg) rotatey(87deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(9) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-38deg) rotatey(31deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(10) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-39deg) rotatey(42deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(11) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-40deg) rotatey(53deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(12) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-41deg) rotatey(64deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(13) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-42deg) rotatey(75deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(14) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-43deg) rotatey(86deg) translateX(4em);
}

.tree li:nth-child(6) .tree-pts .pts:nth-of-type(15) {
width: 10.2em;
height: 12em;
border-radius: 0 0 0 100%;
transform: rotate(-44deg) rotatey(97deg) translateX(4em);
}

.left {
right: 50%;
margin-right: -38px;
}

.right {
left: 50%;
margin-left: -38px;
}

.tree-stem .stem {
width: 0;
height: 0;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
border-bottom: 120px solid #0f4f0f;
margin: 0 auto;
}

.gift {
position: absolute;
width: 50px;
height: 30px;
margin: 5px;
background-color: #ffc0cb;
border: 1px dotted #42161e;
z-index: 20;
box-shadow: 1px -1px 2px #f5b0bc, 2px -2px 2px #e89daa, 3px -3px 2px #da8a98, 4px -4px 2px #ce7a89, 5px -5px 2px #bb6676, 6px -6px 2px #af5969, 7px -7px 2px #a04a5a, 8px -8px 2px #943e4e, 9px -9px 2px #803442, 10px -10px 2px #6b2834, 11px -11px 2px #541e28, 12px -12px 2px #42161e;
}

.g1 {
left: -10px;
top: 110px;
}

.g2 {
left: 33px;
top: 120px;
height: 15px;
}

.g3 {
left: 85px;
top: 125px;
width: 70px;
height: 22px;
}

.g4 {
left: -45px;
top: 130px;
}

.g5 {
left: 45px;
top: 130px;
}

.g6 {
left: 0px;
top: 130px;
}

.g7 {
left: 65px;
top: 130px;
}

.g8 {
left: 120px;
top: 150px;
height: 13px;
width: 123px;
}

.g9 {
left: 50px;
top: 150px;
}

.shadow {
width: 400px;
height: 50px;
background-color: rgba(42, 41, 68, 0.5);
position: absolute;
border-radius: 50%;
top: 126px;
left: -128px;
}

.toys {
display: grid;
position: absolute;
gap: 5px;
grid-template-columns: repeat(9, 20px);
grid-template-rows: repeat(12, 20px);
left: calc(50% - 100px);
top: calc(50% - 135px);
z-index: 2;
}

.toys .star {
top: -30px;
left: 10px;
position: relative;
border-right: 100px solid transparent;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
transform: rotate(35deg) scale(0.2);
}

.toys .star:before {
border-bottom: 80px solid gold;
border-left: 30px solid transparent;
border-right: 30px solid transparent;
position: absolute;
top: -45px;
left: -65px;
content: '';
transform: rotate(-35deg);
}

.toys .star:after {
position: absolute;
top: 3px;
left: -105px;
border-right: 100px solid transparent;
border-bottom: 70px solid gold;
border-left: 100px solid transparent;
transform: rotate(-70deg);
content: '';
}

.toys .ball {
width: 20px;
height: 20px;
background-color: #f00;
border-radius: 50%;
z-index: 1;
position: absolute;
}

.toys .b1,
.toys .b4,
.toys .b5,
.toys .b8,
.toys .b11,
.toys .b13,
.toys .b16,
.toys .b18 {
background-color: red;
box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
}

.toys .b2,
.toys .b6,
.toys .b9,
.toys .b12,
.toys .b14,
.toys .b17,
.toys .b20 {
background-color: gold;
box-shadow: -1px -1px 6px inset #3a3101, 1px 1px 8px inset #ffffff;
}

.toys .b3,
.toys .b7,
.toys .b10,
.toys .b15,
.toys .b19 {
background-color: #ececec;
box-shadow: -1px -1px 6px inset #615f5f, 1px 1px 8px inset #ffffff;
}

.toys .b1 {
grid-area: 3 / 5;
top: -5px;
left: 10px;
}

.toys .b2 {
grid-area: 4 / 4;
top: -5px;
left: -5px;
}

.toys .b3 {
grid-area: 4 / 6;
top: -1px;
left: 5px;
}

.toys .b4 {
grid-area: 5 / 5;
top: -8px;
left: -3px;
}

.toys .b5 {
grid-area: 6 / 2;
}

.toys .b6 {
grid-area: 6 / 4;
top: -10px;
left: -10px;
}

.toys .b7 {
grid-area: 6 / 6;
top: -10px;
left: -5px;
}

.toys .b8 {
grid-area: 6 / 8;
top: 2px;
left: 5px;
}

.toys .b9 {
grid-area: 7 / 1;
top: 4px;
left: 0px;
}

.toys .b10 {
grid-area: 7 / 3;
top: 3px;
left: 3px;
}

.toys .b11 {
grid-area: 7 / 5;
top: -10px;
left: -10px;
}

.toys .b12 {
grid-area: 7 / 7;
top: -4px;
left: 3px;
}

.toys .b13 {
grid-area: 8 / 2;
top: 8px;
left: 0px;
}

.toys .b14 {
grid-area: 8 / 4;
top: 5px;
left: 5px;
}

.toys .b15 {
grid-area: 8 / 6;
top: -10px;
left: -10px;
}

.toys .b16 {
grid-area: 8 / 8;
top: -3px;
left: 17px;
}

.toys .b17 {
grid-area: 9 / 1;
top: 20px;
left: 8px;
}

.toys .b18 {
grid-area: 9 / 6;
top: -5px;
left: 20px;
}

.toys .b19 {
grid-area: 9 / 10;
top: 26px;
left: -30px;
}

.toys .b20 {
grid-area: 8 / 10;
top: 24px;
left: 0px;
}

.light {
width: 3px;
height: 3px;
border-radius: 50%;
position: absolute;
background-color: #fff;
animation: lights 1.5s ease-in infinite alternate;
}

.l1 {
grid-area: 2 / 5;
top: 5px;
left: 5px;
}

.l2 {
grid-area: 3 / 4;
animation-delay: 0.4s;
}

.l3 {
grid-area: 3/ 5;
top: -5px;
left: -5px;
animation-delay: 0.6s;
}

.l4 {
grid-area: 3 / 5;
top: 15px;
left: 0px;
animation-delay: 0.8s;
}

.l5 {
grid-area: 2 / 5;
top: 5px;
left: 5px;
animation-delay: 1s;
}

.l7 {
grid-area: 4 / 5;
top: 5px;
left: 15px;
}

.l8 {
animation-delay: 0.4s;
grid-area: 5 / 7;
top: -10px;
left: 10px;
}

.l9 {
animation-delay: 0.6s;
grid-area: 5 / 6;
}

.l10 {
animation-delay: 0.8s;
grid-area: 5 / 3;
top: -5px;
left: 15px;
}

.l11 {
animation-delay: 1s;
grid-area: 5 / 4;
top: 5px;
left: 10px;
}

.l12 {
grid-area: 6 / 5;
left: 5px;
}

.l13 {
animation-delay: 0.4s;
grid-area: 6 / 7;
left: 5px;
top: 3px;
}

.l14 {
animation-delay: 0.6s;
grid-area: 7 / 6;
left: 5px;
}

.l15 {
animation-delay: 0.8s;
grid-area: 6 / 3;
top: 8px;
}

.l16 {
animation-delay: 1s;
grid-area: 7 / 4;
}

.l17 {
grid-area: 8 / 5;
}

.l18 {
animation-delay: 0.4s;
grid-area: 9 / 6;
}

.l19 {
animation-delay: 0.6s;
grid-area: 8 / 7;
top: 5px;
left: 7px;
}

.l20 {
animation-delay: 0.8s;
grid-area: 8 / 2;
top: -15px;
left: 5px;
}

.l21 {
animation-delay: 1s;
grid-area: 8/ 3;
left: 5px;
top: 5px;
}

.l22 {
animation-delay: 0.4s;
grid-area: 7 / 8;
top: 15px;
left: 20px;
}

.l23 {
animation-delay: 0.6s;
grid-area: 9 / 1;
left: 15px;
top: 15px;
}

.l24 {
animation-delay: 0.8s;
grid-area: 9 / 3;
}

.l25 {
animation-delay: 1s;
grid-area: 9 / 8;
top: 5px;
left: 15px;
}

.l6 {
grid-area: 2 / 5;
top: 10px;
left: 20px;
}

@keyframes starLight {
0% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 42%, rgba(255, 242, 173, 0.2) 58%, rgba(255, 255, 255, 0.1) 100%);
}

15% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 41%, rgba(255, 242, 173, 0.2) 59%, rgba(255, 255, 255, 0.1) 100%);
}

25% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 40%, rgba(255, 242, 173, 0.2) 60%, rgba(255, 255, 255, 0.1) 100%);
}

35% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 39%, rgba(255, 242, 173, 0.2) 61%, rgba(255, 255, 255, 0.1) 100%);
}

50% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 38%, rgba(255, 242, 173, 0.2) 62%, rgba(255, 255, 255, 0.1) 100%);
}

65% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 37%, rgba(255, 242, 173, 0.2) 63%, rgba(255, 255, 255, 0.1) 100%);
}

75% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 36%, rgba(255, 242, 173, 0.2) 64%, rgba(255, 255, 255, 0.1) 100%);
}

85% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 35%, rgba(255, 242, 173, 0.2) 65%, rgba(255, 255, 255, 0.1) 100%);
}

100% {
background: radial-gradient(ellipse at center, gold 0%, rgba(255, 240, 158, 0.5) 34%, rgba(255, 242, 173, 0.2) 66%, rgba(255, 255, 255, 0.1) 100%);
}
}

@keyframes lights {
0% {
box-shadow: 0 0 0px 0px #fff;
}

25% {
box-shadow: 0 0 1px 1px #fff;
}

50% {
box-shadow: 0 0 2px 2px #fff;
}

75% {
box-shadow: 0 0 3px 3px #fff;
}

100% {
box-shadow: 0 0 4px 4px #fff;
}
}
</style>
</html>

5.源码如下：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8" />
   <title>圣诞快乐</title>
   
   <style>
       html,
       body {
           width: 100%;
           height: 100%;
       }
       * {
           margin: 0;
           padding: 0;
       }
       body {
           background-color: #020024;
       }
       .word {
           font-size: 22px;
           text-align: center;
           color: gold;
           padding-top: 50px;
           letter-spacing: 5px;
           text-shadow: 2px 4px 9px rgba(255, 255, 255, 0.7);
       }
       /*圣诞树外层div*/
       .tree {
           width: 200px;
           height: 300px;
           margin: 80px auto 0 auto;
           /*开启相对定位*/
           position: relative;
           /* border: 1px solid #fff; */
       }
       .star {
           width: 50px;
           height: 50px;
           position: absolute;
           background-color: #fff;
           border-radius: 50%;
           top: -25px;
           z-index: 1000;
           /* */
           left: 50%;
           /* */
           transform: translateX(-50%);
           animation: starLight 1.5s ease infinite alternate;
       }
       .star-in {
           position: absolute;
           left: 50%;
           top: 50%;
           border-right: 100px solid transparent;
           border-bottom: 70px solid gold;
           border-left: 100px solid transparent;
           transform: translateX(-50%) translateY(-50%) rotate(35deg) scale(0.14);
       }
       .star-in:before {
           border-bottom: 80px solid gold;
           border-left: 30px solid transparent;
           border-right: 30px solid transparent;
           position: absolute;
           top: -45px;
           left: -65px;
           content: '';
           transform: rotate(-35deg);
       }
       .star-in:after {
           border-bottom: 70px solid gold;
           border-left: 100px solid transparent;
           border-right: 100px solid transparent;
           position: absolute;
           top: 3px;
           left: -105px;
           content: '';
           transform: rotate(-70deg);
       }
       @keyframes starLight {
           0% {
               background: radial-gradient(ellipse at center,
                       gold 0%, rgba(255, 240, 158, 0.5) 42%,
                       rgba(255, 242, 173, 0.2) 58%,
                       rgba(255, 255, 255, 0.1) 100%);
           }
           25% {
               background: radial-gradient(ellipse at center,
                       gold 0%, rgba(255, 240, 158, 0.5) 40%,
                       rgba(255, 242, 173, 0.2) 60%,
                       rgba(255, 255, 255, 0.1) 100%);
           }
           50% {
               background: radial-gradient(ellipse at center,
                       gold 0%, rgba(255, 240, 158, 0.5) 38%,
                       rgba(255, 242, 173, 0.2) 62%,
                       rgba(255, 255, 255, 0.1) 100%);
           }
           75% {
               background: radial-gradient(ellipse at center,
                       gold 0%, rgba(255, 240, 158, 0.5) 36%,
                       rgba(255, 242, 173, 0.2) 64%,
                       rgba(255, 255, 255, 0.1) 100%);
           }
           100% {
               background: radial-gradient(ellipse at center,
                       gold 0%, rgba(255, 240, 158, 0.5) 34%,
                       rgba(255, 242, 173, 0.2) 66%,
                       rgba(255, 255, 255, 0.1) 100%);
           }
       }
       .leaf {
           position: absolute;
           left: 50%;
           top: 3%;
           margin-left: -30px;
           background-color: rgba(14, 110, 14);
           width: 60px;
           height: 60px;
           border-radius: 0 10px 35px 10px;
           transform: rotate(45deg);
           box-shadow: 2px 7px 2px rgba(43, 43, 43, 0.2);
       }
       .edge {
           position: absolute;
           left: 0;
           bottom: 0;
           background-color: rgba(14, 110, 14);
           width: 25px;
           height: 30px;
           border-radius: 0 10px 35px 10px;
           transform: translateY(50%) translateX(0);
       }
       .edge.right {
           position: absolute;
           left: unset;
           bottom: unset;
           top: 0;
           right: 0;
           background-color: rgba(14, 110, 14);
           width: 25px;
           height: 30px;
           border-radius: 0 10px 35px 10px;
           transform: translateY(0) translateX(50%);
       }
       /* 双数修改背景色 */
       .leaf:nth-child(even) {
           background-color: #0f880f;
       }
       .leaf:nth-child(even) .edge {
           background-color: #0f880f;
       }
       /* 最上面 */
       .leaf:nth-child(1) {
           z-index: 100;
           transform: rotate(45deg) scale(0.8);
       }
       /* 第二层 */
       .leaf:nth-child(2) {
           z-index: 99;
           top: 15%;
           transform: rotate(45deg) scale(1.3);
       }
       .leaf:nth-child(3) {
           z-index: 98;
           top: 28%;
           transform: rotate(45deg) scale(1.6);
       }
       .leaf:nth-child(4) {
           z-index: 97;
           top: 41%;
           transform: rotate(45deg) scale(1.9);
       }
       .leaf:nth-child(5) {
           z-index: 96;
           top: 54%;
           transform: rotate(45deg) scale(2.2);
       }
       .trunk {
           width: 25px;
           height: 45px;
           border-radius: 0 0 3px 3px;
           position: absolute;
           left: 50%;
           transform: translateX(-50%);
           bottom: 20px;
           z-index: 1;
           box-shadow: 0 0 10px 5px rgb(19, 19, 19);
           background: linear-gradient(0deg, #6d411b 0%, #5a341d 64%);
       }
       .ball {
           width: 20px;
           height: 20px;
           background: #f00;
           box-shadow: -1px -1px 6px inset #600, 1px 1px 8px inset #ffc9c9;
           border-radius: 50%;
           z-index: 101;
           position: absolute;
       }
       .b1 {
           left: 25%;
           top: 30%;
       }
       .b2 {
           left: 35%;
           top: 50%;
       }
       .b3 {
           left: 65%;
           top: 20%;
       }
       .b4 {
           left: 45%;
           top: 22%;
       }
       .b5 {
           left: 40%;
           top: 72%;
       }
       .b6 {
           left: 65%;
           top: 52%;
       }
       .b7 {
           left: 50%;
           top: 62%;
       }
       .b8 {
           left: 80%;
           top: 42%;
       }
       .b9 {
           left: 10%;
           top: 62%;
       }
       .b4,
       .b5,
       .b6 {
           background: #ececec;
           box-shadow: -1px -1px 6px inset #615f5f, 1px 1px 8px inset #fff;
       }
       .b7,
       .b8,
       .b9 {
           background: gold;
           box-shadow: -1px -1px 6px inset #3a3101, 1px 1px 8px inset #fff;
       }
       .sparkle span {
           display: block;
           position: absolute;
           font-size: 20px;
           z-index: 101;
           color: #fff;
           animation: lights 1.5s ease infinite alternate;
       }
       /* 闪烁动画 */
       @keyframes lights {
           0%,
           100% {
               transform: scale(1);
           }
           50% {
               transform: scale(1.5);
           }
       }
       .sparkle span:nth-child(1) {
           left: 30%;
           top: 40%;
       }
       .sparkle span:nth-child(2) {
           left: 40%;
           top: 27%;
           font-size: 15px;
       }
       .sparkle span:nth-child(3) {
           left: 50%;
           top: 57%;
           font-size: 12px;
       }
       .sparkle span:nth-child(4) {
           left: 70%;
           top: 67%;
           font-size: 14px;
       }
       .sparkle span:nth-child(5) {
           left: 74%;
           top: 13%;
           font-size: 16px;
       }
       .blink div {
           width: 3px;
           height: 3px;
           background: #fff;
           z-index: 101;
           position: absolute;
           border-radius: 50%;
           animation: blink 1.5s ease infinite alternate;
       }
       .blink div:nth-child(2) {
           left: 34%;
           top: 13%;
           transform: scale(1.2);
       }
       .blink div:nth-child(3) {
           left: 54%;
           top: 43%;
           transform: scale(0.6);
       }
       .blink div:nth-child(4) {
           left: 64%;
           top: 33%;
           transform: scale(1.4);
       }
       .blink div:nth-child(5) {
           left: 34%;
           top: 63%;
           transform: scale(1.8);
       }
       .blink div:nth-child(6) {
           left: 14%;
           top: 76%;
           transform: scale(1.5);
       }
       @keyframes blink {
           0% {
               box-shadow: 0 0 0 0 #fff;
           }
           25% {
               box-shadow: 0 0 1px 1px #fff;
           }
           50% {
               box-shadow: 0 0 2px 2px #fff;
           }
           75% {
               box-shadow: 0 0 3px 3px #fff;
           }
           100% {
               box-shadow: 0 0 4px 4px #fff;
           }
       }
   </style>
</head>
<body>
   <p class="word">Merry Christmas</p>
   <div class="tree">
       <div class="star">
           <div class="star-in"></div>
       </div>
       
       <div class="leaf-box">
           <div class="leaf">
               <div class="edge"></div>
               <div class="edge right"></div>
           </div>
           <div class="leaf">
               <div class="edge"></div>
               <div class="edge right"></div>
           </div>
           <div class="leaf">
               <div class="edge"></div>
               <div class="edge right"></div>
           </div>
           <div class="leaf">
               <div class="edge"></div>
               <div class="edge right"></div>
           </div>
           <div class="leaf">
               <div class="edge"></div>
               <div class="edge right"></div>
           </div>
       </div>
       
       <div class="trunk"></div>
       
       <div class="ball-box">
           <div class="ball b1"></div>
           <div class="ball b2"></div>
           <div class="ball b3"></div>
           <div class="ball b4"></div>
           <div class="ball b5"></div>
           <div class="ball b6"></div>
           <div class="ball b7"></div>
           <div class="ball b8"></div>
           <div class="ball b9"></div>
       </div>
       
       <div class="sparkle">
           <span>✦</span>
           <span>✦</span>
           <span>✦</span>
           <span>✦</span>
           <span>✦</span>
           <span>✦</span>
       </div>
       <div class="blink">
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
           <div></div>
       </div>
   </div>
</body>
</html>

6.源码如下：

<!DOCTYPE html>
<html lang="en">
<head>
       <meta charset="utf-8">

       <meta name="description" content="A Christmas tree built out of form elements." />
       <meta name="author" content="Hakim El Hattab" />

       <meta http-equiv="X-UA-Compatible" content="chrome=1">

<title>圣诞树</title>

       <link href='https://fonts.googleapis.com/css?family=Armata' rel='stylesheet' type='text/css'>

       <style type="text/css">
           html{color:#000;background:#222222;}
           a{cursor:pointer;}
           html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
           table{border-collapse:collapse;border-spacing:0;}
           fieldset,img{border:0;}
           address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
           li{list-style:none;}
           caption,th{text-align:left;}
           /* h1,h2,h3,h4,h5,h6{font-size:100%;} */
           q:before,q:after{content:'';}
           abbr,acronym {border:0;font-variant:normal;}
           sup {vertical-align:text-top;}
           sub {vertical-align:text-bottom;}
           input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;outline-style:none;outline-width:0pt;}
           legend{color:#000;}
           a:focus,object,h1,h2,h3,h4,h5,h6{-moz-outline-style: none; border:0px;}
           /*input[type="Submit"]{cursor:pointer;}*/
           strong {font-weight: bold;}
           body, html {
               overflow: hidden;
               font-family: Helvetica, Arial, sans-serif;
               color: #fff;
               font-size: 11px;

               width: 100%;
               height: 100%;

               background: #b72424;
               background: -moz-radial-gradient(center, ellipse cover, #b72424 0%, #492727 100%);
               background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#b72424), color-stop(100%,#492727));
               background: -webkit-radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
               background: radial-gradient(center, ellipse cover, #b72424 0%,#492727 100%);
           }

           @keyframes spin {
               0% { transform: rotateY( 0deg ); }
               100% { transform: rotateY( 360deg ); }
           }

           body {
               perspective: 3000px;
               perspective-origin: 0 20%;
           }

           .tree {
               margin: 0 auto;
               position: relative;
               animation: spin 18s infinite linear;
               transform-origin: 50% 0;
               transform-style: preserve-3d;
           }

           .tree * {
               position: absolute;
               transform-origin: 0 0;
           }
       </style>

</head>
<body>
       <audio src="music.wav" autoplay loop controls></audio>

   <div class="tree"></div>

       <script type="text/javascript">
           // JavaScript Document
const width = 500;
const height = 600;
const quantity = 150;
const types = [ 'text', 'select', 'progress', 'meter', 'button', 'radio', 'checkbox' ];
const greetings = [ '知心宝贝','知心宝贝','Merry Christmas','Merry Christmas','Merry Christmas','Merry Christmas','知心宝贝','12月25','知心宝贝','Merry Christmas','Happy Holidays', ' 知心宝贝','12月25','知心宝贝','Merry Christmas','知心宝贝','Merry Christmas','知心宝贝' ];
let tree = document.querySelector( '.tree' ),
   treeRotation = 0;

tree.style.width = width + 'px';
tree.style.height = height + 'px';

window.addEventListener( 'resize', resize, false );

// The tree
for( var i = 0; i < quantity; i++ ) {
   let element = null,
       type = types[ Math.floor( Math.random() * types.length ) ],
       greeting = greetings[ Math.floor( Math.random() * greetings.length ) ];

   let x = width/2,
       y = Math.round( Math.random() * height );

   let rx = 0,
       ry = Math.random() * 360,
       rz = -Math.random() * 15;

   let elemenWidth = 5 + ( ( y / height ) * width / 2 ),
       elemenHeight = 26;

   switch( type ) {
       case 'button':
           element = document.createElement( 'button' );
           element.textContent = greeting;
           element.style.width = elemenWidth + 'px';
           element.style.height = elemenHeight + 'px';
           break;
       case 'progress':
           element = document.createElement( 'progress' );
           element.style.width = elemenWidth + 'px';
           element.style.height = elemenHeight + 'px';
           if( Math.random() > 0.5 ) {
               element.setAttribute( 'max', '100' );
               element.setAttribute( 'value', Math.round( Math.random() * 100 ) );
           }
           break;
       case 'select':
           element = document.createElement( 'select' );
           element.setAttribute( 'selected', greeting );
           element.innerHTML = '<option>' + greetings.join( '</option><option>' ) + '</option>';
           element.style.width = elemenWidth + 'px';
           element.style.height = elemenHeight + 'px';
           break;
       case 'meter':
           element = document.createElement( 'meter' );
           element.setAttribute( 'min', '0' );
           element.setAttribute( 'max', '100' );
           element.setAttribute( 'value', Math.round( Math.random() * 100 ) );
           element.style.width = elemenWidth + 'px';
           element.style.height = elemenHeight + 'px';
           break;
       case 'text':
       default:
           element = document.createElement( 'input' );
           element.setAttribute( 'type', 'text' );
           element.setAttribute( 'value', greeting );
           element.style.width = elemenWidth + 'px';
           element.style.height = elemenHeight + 'px';
   }

   element.style.transform = `translate3d(${x}px, ${y}px, 0px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

   tree.appendChild( element );
}

// Let it snow
for( var i = 0; i < 200; i++ ) {
   let element = document.createElement( 'input' );
   element.setAttribute( 'type', 'radio' );

   let spread = window.innerWidth/2;

   let x = Math.round( Math.random() * spread ) - ( spread / 4 ),
       y = Math.round( Math.random() * height ),
       z = Math.round( Math.random() * spread ) - ( spread / 2 );

   let rx = 0,
       ry = Math.random() * 360,
       rz = 0;

   if( Math.random() > 0.5 ) element.setAttribute( 'checked', '' );

   element.style.transform = `translate3d(${x}px, ${y}px, ${z}px) rotateX(${rx}deg) rotateY(${ry}deg) rotateZ(${rz}deg)`;

   tree.appendChild( element );
}

function resize() {
   tree.style.top = ( ( window.innerHeight - height - 100 ) / 2 ) + 'px';
}

resize();
       </script>

       
       <p class="project-title">圣诞树</p>

       <style type="text/css" media="screen">
           .project-title {
               position: absolute;
               left: 25px;
               bottom: 20px;

               font-size: 16px;
               color: #fff;
           }

           .credits {
               position: absolute;
               right: 20px;
               bottom: 25px;
               font-size: 15px;
               z-index: 20;
               color: #fff;
               vertical-align: middle;
           }

           .credits * + * {
               margin-left: 15px;
           }

           .credits a {
               padding: 8px 10px;
               color: rgba(255,255,255,0.7);
               border: 2px solid rgba(255,255,255,0.7);
               text-decoration: none;
           }

           .credits a:hover {
               border-color: #fff;
               color: #fff;
           }

           @media screen and (max-width: 1040px) {
               .project-title {
                   display: none;
               }

               .credits {
                   width: 100%;
                   left: 0;
                   right: auto;
                   bottom: 0;
                   padding: 30px 0;
                   background: #b72424;
                   text-align: center;
               }

               .credits a {
                   display: inline-block;
                   margin-top: 7px;
                   margin-bottom: 7px;
               }
           }
       </style>

       <script>
           var _gaq = [['_setAccount', 'UA-15240703-1'], ['_trackPageview']];
           (function(d, t) {
           var g = d.createElement(t),
           s = d.getElementsByTagName(t)[0];
           g.async = true;
           g.src = ('https:' == location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
           s.parentNode.insertBefore(g, s);
           })(document, 'script');
       </script>

</body>
</html>