*{
    margin: 0;
    padding: 0;
}
body{
    /* 100%窗口宽高 */
    height: 100vh;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #233343;
    /* 溢出隐藏 */
    overflow: hidden;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 设置视距 */
    perspective: 1200px;
}
.tree{
    width: 200px;
    height: 300px;
    /* 相对定位 */
    position: relative;
    /* 开启3D */
    transform-style: preserve-3d;
    /* 执行动画 */
    animation: spin 2s linear infinite;
}
/* 彩色小点 */
.tree-light{
    transform-style: preserve-3d;
    position: absolute;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    left: 50%;
    /* 通过var函数调用前面设置好的自定义属性，设置彩色小点的位置、样式和动画 */
    bottom: calc(var(--y) * 1%);
    transform: translate(-50%,50%) rotateY(calc(var(--rotate, 0) * 1deg)) translate3d(0,0,calc(var(--radius, 0) * 8px));
    /* 执行动画 */
    animation: flash calc(var(--speed) * 1s) calc(var(--delay) * 1s) infinite,
               appear 0.5s calc(var(--appear) * 0.05s);
}
/* 星星 */
.tree-star{
    /* 定义线条 */
    stroke: #f5e0a3;
    /* 设置虚线：虚线长度 间距 */
    stroke-dasharray: 1000 1000;
    width: 32px;
    height: 32px;
    /* 星星发光效果 */
    filter: drop-shadow(0 0 10px #fcf1cf);
    /* 绝对定位 */
    position: absolute;
    left: 50%;
    bottom: 100%;
    transform: translate(-50%,0);
    /* 执行动画 */
    animation: stroke 1s calc((var(--delay) * 0.95) * 0.05s) backwards;
}

/* 定义动画 */
/* 彩色小点出现 */
@keyframes appear {
    from{
        opacity: 0;
    }
}
/* 彩色小点变色 */
@keyframes flash {
    0%,100%{
        background-color: #4f60f6;
    }
    20%{
        background-color: #f64f4f;
    }
    40%{
        background-color: #4fecf6;
    }
    60%{
        background-color: #f6db4f;
    }
    80%{
        background-color: #f64fe5;
    }
}
/* 圣诞树旋转 */
@keyframes spin {
    to{
        transform: rotateY(360deg);
    }
}
/* 星星出现 */
@keyframes stroke {
    from{
        stroke-dashoffset: -1000;
    }
}