<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style type="text/css">
* {
box-sizing: border-box;
}
body {
background: #233343;
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
perspective: 1200px;
transform-style: preserve-3d;
}
.tree {
position: relative;
height: 50vmin;
width: 25vmin;
transform-style: preserve-3d;
-webkit-animation: spin 2s infinite linear;
animation: spin 2s infinite linear;
}
.tree__light {
transform-style: preserve-3d;
position: absolute;
height: 1vmin;
width: 1vmin;
border-radius: 50%;
-webkit-animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite steps(4), appear 0.5s calc(var(--appear) * 0.05s) both;
left: 50%;
transform: translate(-50%, 50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0, 0, calc(var(--radius, 0) * 1vmin));
bottom: calc(var(--y, 0) * 1%);
}
.tree__star {
stroke-width: 5vmin;
stroke: #f5e0a3;
filter: drop-shadow(0 0 2vmin #fcf1cf);
height: 5vmin;
width: 5vmin;
overflow: visible !important;
bottom: 100%;
left: 50%;
transform: translate(-50%, 0);
position: absolute;
stroke-dasharray: 1000 1000;
fill: none;
-webkit-animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) both;
}
@-webkit-keyframes stroke {
from {
stroke-dashoffset: -1000;
}
}
@keyframes stroke {
from {
stroke-dashoffset: -1000;
}
}
@-webkit-keyframes spin {
to {
transform: rotateY(360deg);
}
}
@keyframes spin {
to {
transform: rotateY(360deg);
}
}
@-webkit-keyframes appear {
from {
opacity: 0;
}
}
@keyframes appear {
from {
opacity: 0;
}
}
@-webkit-keyframes flash {
0%, 100% {
background: #f00;
}
20% {
background: #fff;
}
40% {
background: #f00;
}
60% {
background: #fff;
}
80% {
background: #f00;
}
}
@keyframes flash {
0%, 100% {
background: #f00;
}
20% {
background: #fff;
}
40% {
background: #f00;
}
60% {
background: #fff;
}
80% {
background: #f00;
}
}
</style>
</head>
<body>
<div class="tree">
<div class="tree__light" style="--appear: 0; --y: 0; --rotate: 1440; --radius: 12.5; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
<div class="tree__light" style="--appear: 1; --y: 2; --rotate: 1411.2; --radius: 12.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
<div class="tree__light" style="--appear: 2; --y: 4; --rotate: 1382.4; --radius: 12; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
<div class="tree__light" style="--appear: 3; --y: 6; --rotate: 1353.6000000000001; --radius: 11.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
<div class="tree__light" style="--appear: 4; --y: 8; --rotate: 1324.8; --radius: 11.5; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
<div class="tree__light" style="--appear: 5; --y: 10; --rotate: 1296; --radius: 11.25; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
<div class="tree__light" style="--appear: 6; --y: 12; --rotate: 1267.2; --radius: 11; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
<div class="tree__light" style="--appear: 7; --y: 14; --rotate: 1238.4; --radius: 10.75; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
<div class="tree__light" style="--appear: 8; --y: 16; --rotate: 1209.6; --radius: 10.5; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
<div class="tree__light" style="--appear: 9; --y: 18; --rotate: 1180.8; --radius: 10.25; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
<div class="tree__light" style="--appear: 10; --y: 20; --rotate: 1152; --radius: 10; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
<div class="tree__light" style="--appear: 11; --y: 22; --rotate: 1123; --radius: 9.75; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
<div class="tree__light" style="--appear: 12; --y: 24; --rotate: 1094.4; --radius: 9.5; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
<div class="tree__light" style="--appear: 13; --y: 26; --rotate: 1065.6; --radius: 9.25; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
<div class="tree__light" style="--appear: 14; --y: 28; --rotate: 1036.8; --radius: 9; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
<div class="tree__light" style="--appear: 15; --y: 30; --rotate: 1008; --radius: 8.75; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
<div class="tree__light" style="--appear: 16; --y: 32; --rotate: 979.2; --radius: 8.5; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
<div class="tree__light" style="--appear: 17; --y: 34; --rotate: 950.4; --radius: 8.25; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
<div class="tree__light" style="--appear: 18; --y: 36; --rotate: 921.6; --radius: 8; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
<div class="tree__light" style="--appear: 19; --y: 38; --rotate: 892.8; --radius: 7.75; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
<div class="tree__light" style="--appear: 20; --y: 40; --rotate: 864; --radius: 7.5; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
<div class="tree__light" style="--appear: 21; --y: 42; --rotate: 835.2; --radius: 7.25; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
<div class="tree__light" style="--appear: 22; --y: 44; --rotate: 806.4; --radius: 7; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
<div class="tree__light" style="--appear: 23; --y: 46; --rotate: 777.6; --radius: 6.75; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
<div class="tree__light" style="--appear: 24; --y: 48; --rotate: 748.8; --radius: 6.5; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
<div class="tree__light" style="--appear: 25; --y: 50; --rotate: 720; --radius: 6.25; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
<div class="tree__light" style="--appear: 26; --y: 52; --rotate: 691.2; --radius: 6; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
<div class="tree__light" style="--appear: 27; --y: 54; --rotate: 662.4; --radius: 5.75; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
<div class="tree__light" style="--appear: 28; --y: 56; --rotate: 633.6; --radius: 5.5; --speed: 9.235939340131775; --delay: -2.416794939166802;"></div>
<div class="tree__light" style="--appear: 29; --y: 58; --rotate: 604.8; --radius: 5.25; --speed: 7.165430171444827; --delay: -2.992603509592233;"></div>
<div class="tree__light" style="--appear: 30; --y: 60; --rotate: 576; --radius: 5; --speed: 3.5061879558149545; --delay: -0.7704234444726743;"></div>
<div class="tree__light" style="--appear: 31; --y: 62; --rotate: 547.2; --radius: 4.75; --speed: 4.727223159267884; --delay: -9.55238654379912;"></div>
<div class="tree__light" style="--appear: 32; --y: 64; --rotate: 518.4; --radius: 4.5; --speed: 0.702989829906826; --delay: -4.2545348853934435;"></div>
<div class="tree__light" style="--appear: 33; --y: 66; --rotate: 489.6; --radius: 4.25; --speed: 6.842573668088441; --delay: -4.560144802030952;"></div>
<div class="tree__light" style="--appear: 34; --y: 68; --rotate: 460.8; --radius: 4; --speed: 5.8193198565131965; --delay: -8.605875056439737;"></div>
<div cl
