精选10个圣诞树效果，这个圣诞更有技术范

YOLO大师

已于 2022-02-15 23:14:11 修改

阅读量6.5k

点赞数 41

文章标签： css html5 javascript

于 2021-12-21 10:45:47 首次发布

原创文章，禁止任何形式转载！

本文链接：https://blog.csdn.net/shangyanaf/article/details/122056967

版权

CSS实战100+例专栏收录该内容

1 篇文章 2 订阅

订阅专栏

扫码或搜索添加文末公众号「搞前端的半夏」：
🍗 硬核资料：领取1000+PPT模板、100+简历模板、行业经典书籍PDF。
🍗 回复 ”网站模板“，免费送网站模板！
🍗 回复 ”面试“：免费送你面试题库！
🍗 加我：frontendpicker, 更多精彩等你来！
🍗 回复[算法]，获取各种算法资料！

扫码或搜索添加文末公众号「搞前端的半夏」，回复[圣诞树]，获取完整源码。

灯光闪闪的圣诞树

扫码或搜索添加文末公众号「半夏话前端」，回复[圣诞树]，获取完整源码。

<svg id="tree" xmlns="http://www.w3.org/2000/svg" version="1.1" id="Layer_1" x="0" y="0" viewBox="-1694.2 483.2 199.3 285.2" xml:space="preserve">
  <g id="tree">
    <rect x="-1605.6" y="697.1" class="st0" width="21.7" height="71.3"/>
    <polygon class="st1" points="-1656.1 616.8 -1634.8 612 -1670.6 676.1 -1648.5 671.1 -1694.2 753 -1595 730.5 -1595 507.4 "/>
    <polygon class="st2" points="-1494.9 753 -1540.6 671.1 -1518.5 676.1 -1554.4 612 -1533.1 616.8 -1594.7 506.8 -1595 507.4 -1595 730.5 -1594.7 730.4 "/>
  </g>
  <polygon class="st6" points="-1600.5 499.9 -1618.1 499.9 -1603.8 510.3 -1609.3 527 -1595 516.7 -1595 483.2 "/>
  <polygon class="st7" points="-1572 499.9 -1589.6 499.9 -1595 483.2 -1595 516.7 -1580.8 527 -1586.2 510.3 "/>
</svg>

渐变闪烁的圣诞树

<div id="overlay"></div>
<div id="tree">

3D 旋转圣诞树

<div class="container">
	<div class="tree">
		<div class="shadow ts-3d"></div>
		<div class="trunk ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-bottom ts-3d">
			<div></div>
			<div></div>
			<div></div>
			<div></div>
		</div>
		<div class="leaves-middle ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="leaves-top ts-3d">
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
			<div class="ts-3d"></div>
		</div>
		<div class="star star-1 ts-3d"></div>
		<div class="star star-2 ts-3d"></div>
		<div class="star star-3 ts-3d"></div>
		<div class="star star-4 ts-3d"></div>
		<div class="star star-5 ts-3d"></div>
		<div class="shine ts-3d"></div>
	</div>
	<div class="snow-container">
		<div class="snow snow-1 snow-y-1"></div>
		<div class="snow snow-2 snow-y-2"></div>
		<div class="snow snow-3 snow-y-3"></div>
		<div class="snow snow-4 snow-y-3"></div>
		<div class="snow snow-5 snow-y-2"></div>
		<div class="snow snow-6 snow-y-1"></div>
		<div class="snow snow-7 snow-y-1"></div>
		<div class="snow snow-8 snow-y-2"></div>
		<div class="snow snow-9 snow-y-3"></div>
		<div class="snow snow-10 snow-y-3"></div>
	</div>
</div>

水晶球圣诞树


<ul class="bgg">
  <li class="sphere"></li>
</ul>
<ul class="tree">
  <li class="top-star"> </li>
  <li class="top">
    <ul class="tree-pts">
    </ul>
  </li>
  <li class="middle first">
    <ul class="tree-pts">
    </ul>
  </li>
  <li class="middle second">
    <ul class="tree-pts">

      <li class="pts right"></li>
      <li class="pts right"></li>
    </ul>
  </li>
  <li class="middle third">
    <ul class="tree-pts">
    </ul>
  </li>
  <li class="bottom outer">
    <ul class="tree-pts">
    </ul>
  </li>
  <li class="stem">
    <ul class="tree-stem">
    </ul>
  </li>
</ul>
<ul class="toys">
  <li class="star"></li>
</ul>

ASCII 圣诞树

var decorate = (n, offset, lights) => {
  var decoration, pos = [];

	decoration = Array(n + 1).join("~");

	for(var j = 0; j < lights; j++) pos.push(offset + j);

	var arr = decoration.split("");
	for(var j = 0; j < n; j++){
		if(pos.indexOf(j) > -1) arr[j] = "o";
	}
	decoration = arr.join("");
	
  return decoration;
}

var indent = (n) => {
	var indents = "";
  for(var i = 0; i < n; i++) indents += "&nbsp;";
  return indents;
}

var tree = (height, lights) => {
  var branch = "", decoPos = 1, offset = -lights;
	
	branch += indent(height - 1);
	branch += "@";
	branch += indent(height - 1);
	branch += "<br />";
	
  for(var i = 1; i <= height; i++){
    branch += indent(height - i, " ");
    branch += decorate(decoPos, offset, lights);
    branch += indent(height - i, " ");
    
    decoPos += 2;
		offset += 3;
		offset %= decoPos;
    branch += "<br />";
  }
	
	branch += indent(height - 1);
	branch += "#";
	branch += indent(height - 1);
  
  return branch;
}


var i = 1;
document.getElementById("tree").innerHTML = tree(20, i++);
setInterval(() => {
	document.getElementById("tree").innerHTML = tree(20, i);
	i %= 4;
	i++;
}, 2500);

彩灯圣诞树

<body>
  <div class="box-canvas">
    <div class="trunk"></div>
    <div class="tree"></div>
    <div class="star"></div>
    <div class="lights-group bottom">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
    <div class="lights-group top">
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
      <div class="light"></div>
    </div>
  </div>
</body>

写实圣诞树

<div class="parallax">
  
  <div class="parallax__layer parallax__layer--fore">
    <h1>Merry Christmas & Happy New Year!!!</h1>
    
    
    <div class="background"></div>
  </div>
  
  <div class="parallax__layer parallax__layer--deep">
    <div class="background"></div>
  </div>
  
  <div class="parallax__layer parallax__layer--back">
    <div class="background"></div>
  </div>
  
  <div class="parallax__layer parallax__layer--base">
    <div class="background"></div>
  </div>
</div>
<div class="giftbox"></div>

<div class="interactive">

  <div class="container"> 
  <div class="star"></div>
  <div class="pressie">
    <div class="cover"></div>
    <div class="wrap"> </div>
    <div class="ribbon"></div>
  </div>
  <div class="tree">
    <div class="base"> </div>
    <div class="layer">
      <div class="line"> </div>
      <div class="bauble one"></div></div>
    
    <div class="layer two">
      <div class="line two"> </div>
      <div class="bauble two"></div>
      <div class="socks"> 
        <div class="top"> </div>
        <div class="foot"></div></div>
      </div>
    
    <div class="layer three">
      <div class="line three"> </div>
      <div class="bauble three"></div>
      <div class="socks two"> 
        <div class="top"> </div>
        <div class="foot two"></div></div>
      </div>
       </div>
    
    <div class="layer four">
      <div class="bauble four"></div>
      <div class="star two"></div>
      <div class="line four"> </div> 
       </div>
  </div>
</div>
</div>

多选择圣诞树

    <label class="btn-mode" for="Classic">Classic</label>
    <input class="input-mode" id="Night" type="radio" name="mode" />
    <label class="btn-mode" for="Night">Night</label>
    <input class="input-mode" id="Gray" type="radio" name="mode" />
    <label class="btn-mode" for="Gray">Gray</label>
    <input class="input-mode" id="Acid" type="radio" name="mode" />
    <label class="btn-mode" for="Acid">Acid</label>
    <input class="input-mode" id="Snow" type="radio" name="mode" />
    <label class="btn-mode" for="Snow">Snow</label>
    <input class="input-mode" id="Flat" type="radio" name="mode" />
    <label class="btn-mode" for="Flat">Flat</label>
    <input class="input-mode" id="Metal" type="radio" name="mode" />
    <label class="btn-mode" for="Metal">Metal</label>