程序员的浪漫圣诞节到了，何不送给Ta一份程序员的浪漫
Posted 海拥✘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了程序员的浪漫圣诞节到了，何不送给Ta一份程序员的浪漫相关的知识，希望对你有一定的参考价值。
接下来是雪花❄，圣诞树🎄，新年💌和更好的我们
世上本无圣诞老人，所有的礼物都来自爱你的人
今天给大家带来几个好看的基于html+CSS（+JS）的圣诞树，希望圣诞节那天圣诞老爷爷能把我喜欢的你塞到我床上
雪花 和 樱花 以及 浪漫贺卡 我前两天刚做过，感兴趣的也可以看看我前两期的博客：
雪花：https://haiyong.blog.csdn.net/article/details/105786233
樱花：https://haiyong.blog.csdn.net/article/details/122008942
一、只使用 CSS 制作的动画圣诞树
演示地址：http://haiyong.site/christmastree1（建议使用电脑打开，没做响应式手机端会有些变形，或者可以看看后面的圣诞树）
HTML代码：
这里的HTML代码是完整无删减的
<div class="card-container">
<div class="snow-flakes-1"></div>
<div class="snow-flakes-2"></div>
<h2>接下来是雪花，圣诞树，新年和</h2>
<h1>更好的我们</h1>
<div class="tree-container">
<div class="ball-0"></div>
<div class="tree-p1">
<ul>
<li>
<div class="xmas-ball ball-1"></div>
<div class="tree-left-branch"></div>
</li>
<li><div class="tree-right-branch"></div></li>
</ul>
</div>
<div class="tree-p2">
<ul>
<li>
<div class="xmas-ball ball-2"></div>
<div class="tree-left-branch"></div>
</li>
<li>
<div class="xmas-ball ball-3"></div>
<div class="tree-right-branch"></div>
</li>
</ul>
</div>
<div class="tree-p3">
<ul>
<li>
<div class="xmas-ball ball-6"></div>
<div class="tree-left-branch"></div>
</li>
<li>
<div class="xmas-ball ball-5"></div>
<div class="xmas-ball ball-4"></div>
<div class="tree-right-branch"></div>
</li>
</ul>
</div>
<div class="tree-p4">
<ul>
<li>
<div class="xmas-ball ball-7"></div>
<div class="xmas-ball ball-8"></div>
<div class="tree-left-branch"></div>
</li>
<li>
<div class="xmas-ball ball-9"></div>
<div class="xmas-ball ball-10"></div>
<div class="tree-right-branch stubborn"></div>
</li>
</ul>
</div>
<div class="wood"></div>
<div class="presents">
<div class="present-container-1">
<div class="tie"></div>
<div class="lid"></div>
<div class="box"></div>
</div>
<div class="present-container-2">
<div class="tie"></div>
<div class="lid"></div>
<div class="box"></div>
</div>
</div>
</div>
<h3>圣诞节快乐!</h3>
<p><span>from haiyong</span></p>
</div>
CSS主要代码
CSS比较多，我截取了部分主要代码，需要完整代码可关注公众号【海拥】回复【圣诞树】或者通过文章底部小卡片加我，发给你。
body
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #000;
ul
list-style-type: none;
ul li
display: inline-block;
h1
font-family: "Mountains of Christmas", cursive;
font-size: 42px;
line-height: 60px;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
h1::before, h1::after
content: "❆";
margin: 0 10px;
h2
font-family: "Source Sans Pro", sans-serif;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
h3
font-family: "Open Sans Condensed", sans-serif;
font-weight: 300;
font-size: 18px;
letter-spacing: 2px;
margin-bottom: 5px;
p
font-family: "Dancing Script", cursive;
font-size: 20px;
font-weight: 700;
span
font-family: "Roboto", sans-serif;
font-size: 14px;
font-weight: 400;
.card-container
height: 675px;
width: 675px;
padding: 30px;
background-color: rgba(255, 255, 255, 0.6);
border: 8px double #fff;
border-radius: 20px;
text-align: center;
border-radius: 50%;
-webkit-border-radius: 50%;
overflow: hidden;
position: relative;
-webkit-mask-image: -webkit-radial-gradient(white, black);
二、只使用 CSS 制作的螺旋圣诞树
演示地址：http://haiyong.site/christmastree2（在手机端和PC端都可以完美响应）
HTML代码
<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>
<!-- 一样的规律一直写到 style="--appear: 49;此处省略为了博客简洁-->
<div class="tree__light" style="--appear: 49; --y: 98; --rotate: 28.8; --radius: 0.25; --speed: 1.7070837859932286; --delay: -3.8515175108122546;"></div>
<svg class="tree__star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 113.32 108.44" style="--delay: 50">
<path d="M90.19 104.33L57.12 87.38 24.4 105l5.91-36.69L3.44 42.65l36.72-5.72 16.1-33.5L73.06 36.6l36.83 4.97-26.35 26.21z" fill="none" stroke-width="6.88" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
</div>
完整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);
浪漫的turtle，送给程序员自己的圣诞树！
程序员的浪漫：如何用HTML+JS制作圣诞节雪花特效(附带源码)