HTML圣诞树代码（动态效果）

本文主要是介绍HTML圣诞树代码（动态效果），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

HTML代码过长所以在顶部资源链接可以直接下载

Pug代码：

.main-wrapper.tree-container.star.spiral-containerul.spiral.one- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .lightul.spiral.two- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .lightul.spiral.three- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .lightul.spiral.four- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .lightul.spiral.five- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .lightul.spiral.six- for (var x = 1; x <= 43; x++)li.light-wrapper(class="light-wrapper-" + x).stabilise: .light.text-container//- h2 The best is yet to comeh2.happy Happy Holidays

LESS代码：

@import url('https://fonts.googleapis.com/css?family=Great+Vibes');
@itemsize: 6px;.main-wrapper {background: radial-gradient(ellipse at bottom, #a90e0e 5%, #4e0303 55%, #330000 78%);position: absolute;display: flex;align-items: center;justify-content: center;top: 0;left: 0;width: 100%;height: 100%;margin: 0;padding: 0;
}.tree-container {display: block;	height: 370px;margin: 0;padding: 0;
}.text-container {margin: 0;padding: 0;position: absolute;bottom: 14%;left: 15%;right: 15%;display: flex;align-items: center;justify-content: center;flex-direction: column;text-align: center;h2 {color: rgba(252, 251, 233, 0.85);font-family: 'Great Vibes', cursive;font-weight: 400;margin: 0 0 .8em 0;&.happy {font-size: 3.3em;}}a.c2 {@size: 40px;display: block;font-size: 13px;width: @size;height: @size;background-color: rgba(252, 251, 233, 0.8);border-radius: 50%;color: #8c1313;text-decoration: none;line-height: @size;}
}.star {@dimensions: 12px;@color: #f7b93f;@divider: 1.3;border-radius: 0;border-color: @color transparent transparent transparent;border-style: solid;border-top-width: @dimensions / @divider;border-right-width: @dimensions;border-left-width: @dimensions;height: 0;width: 0;margin-bottom: 5px;background: transparent;z-index: 100;animation: pulsate-star 1.4s ease-in-out infinite alternate-reverse;&:before,&:after {border-color: @color transparent transparent transparent;border-style: solid;border-top-width: @dimensions / @divider;border-right-width: @dimensions;border-left-width: @dimensions;border-bottom: 0;content: '';display: block;height: 0;left: -@dimensions;position: absolute;top: -@dimensions / @divider;width: 0;}&:before {transform: translate(15.5555555%, -15.5555555%) rotate(360deg/5) translateY(50%);}&:after {transform: translate(-15.5555555%, -15.5555555%) rotate(-360deg/5) translateY(50%);}
}.spiral-container {width: 100%;height: 100%;display: block;
}.spiral {position: relative;margin: 0;padding: 0;transform-style: preserve-3d;&.one {animation: rotate-tree 6s infinite linear both;animation-delay: 0s;.light {background: #fcfbe9;}}&.two {animation: rotate-tree 7s infinite linear both;animation-delay: 0.5s;.light {background: #e8a41d;}}&.three {animation: rotate-tree 8s infinite linear both;animation-delay: 1s;.light {background: #f5e393;}}&.four {animation: rotate-tree 9s infinite linear both;animation-delay: 1.5s;.light {background: #a1e8a4;}}&.five {animation: rotate-tree 10s infinite linear both;animation-delay: 2s;.light {background: #e8a4d8;}}&.six {animation: rotate-tree 11s infinite linear both;animation-delay: 2.5s;.light {background: #a4d8e8;}}> .light-wrapper {border-radius: 50%;position: absolute;display: block;width: @itemsize;height: @itemsize;left: 50%;top: 50%;margin: -@itemsize/2 0 0 -@itemsize/2;}.stabilise {position: absolute;display: block;width: 100%;height: 100%;}.light {position: absolute;display: block;width: 100%;height: 100%;border-radius: 50%;top: 0;left: 0;border-radius: 50%;opacity: 1;animation-name: pulsate;animation-timing-function: ease-in-out;animation-iteration-count: infinite;animation-direction: alternate-reverse;}
}.makespiral( @className: ~".spiral"; @itemNo:3; @degrees:0; @elNo: 1; @size: 5px; @delayOffset: 0 ) when ( @elNo <= @itemNo ) {@spacing: 11;@currDeg: unit(@degrees,deg);@correctionDeg: unit(-@degrees,deg);@y: unit(cos(@currDeg) * @elNo * @elNo / 10, px);@x: unit(sin(@currDeg) * @elNo * @elNo / 10, px);@z: unit(@elNo * @elNo / 6, px);@duration: 0.65s; // 固定持续时间@{className} {.light-wrapper.light-wrapper-@{elNo} {transform: translate3d( @x, @y, @z ) rotateX(90deg) rotateZ(0deg) rotateY(@correctionDeg);width: (@size * (@elNo / @itemNo) * 7);height: (@size * (@elNo / @itemNo) * 7);.light {animation-duration: @duration;animation-delay: @delayOffset + @elNo * 0.1s;}}}.makespiral(@className; @itemNo; @degrees + @spacing; @elNo + 1; @size; @delayOffset);
}.makespiral(@className: ~".spiral.one"; @itemNo: 43; @size: 2px); // 第一条螺旋
.makespiral(@className: ~".spiral.two"; @itemNo: 43; @size: 3px; @delayOffset: 1); // 第二条螺旋
.makespiral(@className: ~".spiral.three"; @itemNo: 43; @size: 2px; @delayOffset: .5); // 第三条螺旋
.makespiral(@className: ~".spiral.four"; @itemNo: 43; @size: 2.5px; @delayOffset: 0.8); // 第四条螺旋
.makespiral(@className: ~".spiral.five"; @itemNo: 43; @size: 3.5px; @delayOffset: 0.3); // 第五条螺旋
.makespiral(@className: ~".spiral.six"; @itemNo: 43; @size: 2.8px; @delayOffset: 1.2); // 第六条螺旋@keyframes pulsate {0% {transform: scale(.5);opacity: .4;}100% {transform: scale(1);}
}@keyframes pulsate-star {0% {transform: scale(.9);opacity: .8;}100% {transform: scale(1);opacity: 1;}
}@keyframes rotate-tree {0% {transform: rotateX(-90deg) rotateZ(0deg) rotateY(0deg);}100% {transform: rotateX(-90deg) rotateZ(360deg) rotateY(0deg);}
}

源码地址（因为源码会报错，上面的代码是修改过能运行的，而且在效果上我也做了些改变）：Animated 3D Christmas Tree · GitHub

-----------------------------------------------------------------我是分割线--------------------------------------------------------------

看完了觉得不错就点个赞或者评论下吧，感谢！！！

这篇关于HTML圣诞树代码（动态效果）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---