一、前言
想做一个圣诞树，通过html实现了下
二、效果展示
三、代码
<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8"/><metaname="viewport"content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/><title>给土豆的圣诞树</title><style>body{background:-webkit-linear-gradient(top, #235, #222 40%, #fff 50%, #fff);background:linear-gradient(to bottom, #235, #222 40%, #fff 50%, #fff);overflow: hidden;height: 100vh;width: 100%;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;padding: 0;margin: 0;}tspan{font-size: 48px;font-family: sans-serif;fill: #fc2d2a;}tspan:nth-of-type(5n + 5){fill: #fc2df2;}tspan:nth-of-type(5n + 4){fill: #342df2;}tspan:nth-of-type(5n + 3){fill: #fcf52a;}tspan:nth-of-type(5n + 2){fill: #34f52a;}.tree{-webkit-filter:brightness(90%);filter:brightness(90%);-webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;}.tree path{stroke: #336833;}.huzzah .tree{-webkit-filter:brightness(105%);filter:brightness(105%);}.tree,
.lights,
.lights-blur,
.star,
.star-blur{position: absolute;bottom: 5%;left: 50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);width: 60vmin;z-index: 100;}.tree svg,
.lights svg,
.lights-blur svg,
.star svg,
.star-blur svg{max-width: 100%;}.star{-webkit-filter:brightness(0.5);filter:brightness(0.5);-webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;}.huzzah .star{-webkit-filter:brightness(1.3);filter:brightness(1.3);}.lights{-webkit-filter:brightness(0.4)opacity(0.85);filter:brightness(0.4)opacity(0.85);-webkit-transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;transition: -webkit-filter 0.145s ease-in-out, filter 0.145s ease-in-out;}.huzzah .lights{-webkit-filter:brightness(1.3);filter:brightness(1.3);}.lights-blur{opacity: 0;-webkit-transition: -webkit-filter 0.145s ease-in-out, opacity 0.145s ease-in-out, filter 0.145s ease-in-out, opacity 0.145s ease-in-out;transition: -webkit-filter 0.145s ease-in-out, opacity 0.145s ease-in-out, filter 0.145s ease-in-out, opacity 0.145s ease-in-out;}.huzzah .lights-blur{opacity: 1;-webkit-filter:brightness(1.3)blur(3px);filter:brightness(1.3)blur(3px);}.forest{-webkit-filter:grayscale(0.33);filter:grayscale(0.33);position: absolute;width: 100%;top: 50%;}.forest .back-tree{position: absolute;top: 50%;left: 0;width: 60vmin;-webkit-transform-origin: 0 0;-ms-transform-origin: 0 0;transform-origin: 0 0;}.forest .back-tree:nth-of-type(1){-webkit-transform:translate3d(-10vw, -50%, 0)scale(0.5);transform:translate3d(-10vw, -50%, 0)scale(0.5);z-index: 50;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(2){-webkit-transform:translate3d(0, -50%, 0)scale(0.67);transform:translate3d(0, -50%, 0)scale(0.67);z-index: 67;}.forest .back-tree:nth-of-type(3){-webkit-transform:translate3d(10vw, -50%, 0)scale(0.45);transform:translate3d(10vw, -50%, 0)scale(0.45);z-index: 45;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(4){-webkit-transform:translate3d(18vw, -48%, 0)scale(0.56);transform:translate3d(18vw, -48%, 0)scale(0.56);z-index: 56;-webkit-filter:grayscale(0.33)brightness(0.9);filter:grayscale(0.33)brightness(0.9);}.forest .back-tree:nth-of-type(5){-webkit-transform:translate3d(28vw, -50%, 0)scale(0.5);transform:translate3d(28vw, -50%, 0)scale(0.5);z-index: 50;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(6){-webkit-transform:translate3d(37vw, -50%, 0)scale(0.66);transform:translate3d(37vw, -50%, 0)scale(0.66);z-index: 66;}.forest .back-tree:nth-of-type(7){-webkit-transform:translate3d(36vw, -50%, 0)scale(0.54);transform:translate3d(36vw, -50%, 0)scale(0.54);z-index: 54;-webkit-filter:grayscale(0.33)brightness(0.9);filter:grayscale(0.33)brightness(0.9);}.forest .back-tree:nth-of-type(8){-webkit-transform:translate3d(49vw, -50%, 0)scale(0.46);transform:translate3d(49vw, -50%, 0)scale(0.46);z-index: 46;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(9){-webkit-transform:translate3d(57vw, -50%, 0)scale(0.69);transform:translate3d(57vw, -50%, 0)scale(0.69);z-index: 69;}.forest .back-tree:nth-of-type(10){-webkit-transform:translate3d(66vw, -50%, 0)scale(0.55);transform:translate3d(66vw, -50%, 0)scale(0.55);z-index: 55;-webkit-filter:grayscale(0.33)brightness(0.9);filter:grayscale(0.33)brightness(0.9);}.forest .back-tree:nth-of-type(11){-webkit-transform:translate3d(72vw, -50%, 0)scale(0.49);transform:translate3d(72vw, -50%, 0)scale(0.49);z-index: 49;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(12){-webkit-transform:translate3d(80vw, -50%, 0)scale(0.6);transform:translate3d(80vw, -50%, 0)scale(0.6);z-index: 60;-webkit-filter:grayscale(0.33)brightness(0.9);filter:grayscale(0.33)brightness(0.9);}.forest .back-tree:nth-of-type(13){-webkit-transform:translate3d(88vw, -50%, 0)scale(0.56);transform:translate3d(88vw, -50%, 0)scale(0.56);z-index: 56;-webkit-filter:grayscale(0.33)brightness(0.9);filter:grayscale(0.33)brightness(0.9);}.forest .back-tree:nth-of-type(14){-webkit-transform:translate3d(96vw, -50%, 0)scale(0.48);transform:translate3d(96vw, -50%, 0)scale(0.48);z-index: 48;-webkit-filter:grayscale(0.33)brightness(0.9)opacity(0.6);filter:grayscale(0.33)brightness(0.9)opacity(0.6);}.forest .back-tree:nth-of-type(15){-webkit-transform:translate3d(100vw, -50%, 0)scale(0.56);transform:translate3d(100vw, -50%, 0)scale(0.56);z-index: 56;}.forest .back-tree:nth-of-type(16){-webkit-transform:translate3d(109vw, -50%, 0)scale(0.6);transform:translate3d(109vw, -50%, 0)scale(0.6);z-index: 60;}.snow{width: 1rem;height: 1rem;background: #fff;border-radius: 50%;display: inline-block;position: absolute;top: -1rem;left: 0;z-index: 150;}.yeti{position: absolute;bottom: -270px;left: 40px;width: 300px;z-index: 200;-webkit-transform:translate3d(0, 100%, 0);transform:translate3d(0, 100%, 0);will-change: transform;-webkit-transition: -webkit-transform 0.6s 0s ease-in;transition: transform 0.6s 0s ease-in;display: none;}.huzzah .yeti{-webkit-transform:translate3d(0, 0%, 0);transform:translate3d(0, 0%, 0);-webkit-transition: -webkit-transform 6s 1s ease-out;transition: transform 6s 1s ease-out;}.huzzah .yeti circle{-webkit-animation: shifty 9s alternate infinite ease-in-out both;animation: shifty 9s alternate infinite ease-in-out both;}.yeti-claws{position: absolute;bottom: 0;left: 20px;width: 280px;will-change: transform;}.yeti-claws .claw{display: inline-block;float: left;width: 1rem;height: 1rem;background: #a4bbdc;border-radius: 50%;}.yeti-claws .claw:nth-of-type(odd){float: right;}.huzzah .yeti-claws{-webkit-animation: clawy 3s 1s normal ease-in-out both, clawy2 3s 3s normal linear both;animation: clawy 3s 1s normal ease-in-out both, clawy2 3s 3s normal linear both;}@-webkit-keyframes shifty{54%{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}80%{-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0);}}@keyframes shifty{54%{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}80%{-webkit-transform:translate3d(-20px, 0, 0);transform:translate3d(-20px, 0, 0);}}@-webkit-keyframes clawy{0%{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}50%{-webkit-transform:translate3d(0px, -16px, 0);transform:translate3d(0px, -16px, 0);}80%,
100%{-webkit-transform:translate3d(0px, -8px, 0);transform:translate3d(0px, -8px, 0);}}@keyframes clawy{0%{-webkit-transform:translate3d(0px, 0, 0);transform:translate3d(0px, 0, 0);}50%{-webkit-transform:translate3d(0px, -16px, 0);transform:translate3d(0px, -16px, 0);}80%,
100%{-webkit-transform:translate3d(0px, -8px, 0);transform:translate3d(0px, -8px, 0);}}@-webkit-keyframes clawy2{69%, 70%, 100%{z-index: 240;}}@keyframes clawy2{69%, 70%, 100%{z-index: 240;}}.codepen{position: absolute;bottom: 0;width: 100%;height: 1rem;background: #343436;z-index: 210;}.glow-screen{position: absolute;z-index: 90;top: 0;left: 0;right: 0;bottom: 0;background:-webkit-radial-gradient(50% 50%, circle,rgba(0, 0, 0, 0), #444);background:radial-gradient(circle at 50% 50%,rgba(0, 0, 0, 0), #444);opacity: 0;-webkit-transition: opacity 0.145s ease-in-out;transition: opacity 0.145s ease-in-out;}.huzzah .glow-screen{opacity: 0.2;}</style></head><body><sectionclass="music"><embedsrc="123.mp3"autostart="true"loop="true"hidden="true"></embed></section><svgxmlns="http://www.w3.org/2000/svg"style="display: none;"><symbolviewBox="-10 -10 450 510"id="yeti"><pathfill="#FFFFFF"stroke="#CCCCD1"stroke-width="6"d="M71.762,225.812c-16.97-9.15,4.478-141.045,4.478-141.045
c20.896-43.284,55.782-57.057,63.433-62.687c39.553-29.104-23.928,53.011,12.687,23.134c26.124-21.316,30.224-35.893,41.418-44.403
c5.941-4.516-2.612,41.417-2.612,41.417s19.03-20.522,35.821-37.313c6.332-6.332-17.536,42.164-17.536,42.164
s64.477-47.313,57.089-39.925c-10.447,10.448-13.433,38.059-13.433,41.044s21.218,3.074,32.089,5.224
c67.911,13.433,22.716,159.985,42.537,168.657c47.762,20.896,152.986,239.553,76.12,271.642s-268.657,41.791-355.224,13.433
C-4.523,489.744-34.208,282.529,71.762,225.812"/><pathfill="#A4BBDC"d="M130.048,165.985c-20.535-13.645-45.842-57.117-8.595-71.078c37.247-13.96,150.902-13.327,157.585,0
c6.686,13.327,32.472,58.385,6.686,66.635C259.939,169.792,130.048,165.985,130.048,165.985z"/><pathfill="#A4BBDC"d="M131.463,536.259c0,0-52.984-211.194-17.91-229.104s154.851-36.193,180.597-10.447
S326.267,450.828,324,480.29C312.806,625.811,131.463,536.259,131.463,536.259z"/><ellipsefill="#FFFFFF"cx="176.986"cy="127.304"rx="28.359"ry="31.716"/><ellipsefill="#FFFFFF"cx="222.986"cy="127.304"rx="28.358"ry="31.716"/><circlecx="238.47"cy="142.789"r="10.261"/><circlecx="192.47"cy="142.789"r="10.261"/><pathfill="none"stroke="#ACACB1"stroke-width="3"d="M200.816,81.398c17.534-13.058,44.282-6.76,59.806,14.082"/><pathfill="none"stroke="#ACACB1"stroke-width="3"d="M133.259,79.191c7.845-20.406,33.821-29.373,58.078-20.047"/></symbol><symbolid="plain-tree"viewBox="0 0 500 630"><polygonfill="#BF0082"stroke="#54B948"stroke-width="3"points="281.493,628.864 203.881,628.864 213.646,583.342
271.728,583.342 "/><polygonfill="#2BBD88"stroke="#54B948"stroke-width="3"points="482.61,579.117 3.6,579.117 63.866,518.35 422.345,518.35 "transform="translate(0,9)"/><polygonfill="#2BBD65"stroke="#54B948"stroke-width="3"points="416.375,513.499 69.835,513.499 113.435,415.177
372.777,415.177 "transform="translate(0,12)"/><polygonfill="#2BB621"stroke="#54B948"stroke-width="3"points="393.136,410.177 93.073,410.177 130.825,359.431
355.385,359.431 "transform="translate(0,15)"/><polygonfill="#65B621"stroke="#54B948"stroke-width="3"points="399.927,354.82 86.283,354.82 125.744,309.298 360.466,309.298
"transform="translate(0,17)"/><polygonfill="#2B9774"stroke="#54B948"stroke-width="3"points="341.218,305.191 144.993,305.191 169.68,252.664 316.53,252.664
"transform="translate(0,19)"/><polygonfill="#7EB948"stroke="#54B948"stroke-width="3"points="334.092,248.512 152.119,248.512 175.013,179.855
311.196,179.855 "transform="translate(0,21)"/><polygonfill="#54B948"stroke="#54B948"stroke-width="3"points="326.63,174.855 159.581,174.855 180.597,138.672
305.614,138.672 "transform="translate(0,24)"/><polygonfill="#006837"stroke="#54B948"stroke-width="3"points="293.438,134.729 192.772,134.729 205.438,89.207 280.772,89.207
"transform="translate(0,25)"/></symbol></svg><divclass="yeti"><svgviewBox="0 0 500 630"><pathfill="#FFFFFF"stroke="#CCCCD1"stroke-width="4"class="body"d="M71.762,225.812c-16.97-9.15,4.478-141.045,4.478-141.045
c20.896-43.284,55.782-57.057,63.433-62.687c39.553-29.104-23.928,53.011,12.687,23.134c26.124-21.316,30.224-35.893,41.418-44.403
c5.941-4.516-2.612,41.417-2.612,41.417s19.03-20.522,35.821-37.313c6.332-6.332-17.536,42.164-17.536,42.164
s64.477-47.313,57.089-39.925c-10.447,10.448-13.433,38.059-13.433,41.044s21.218,3.074,32.089,5.224
c67.911,13.433,22.716,159.985,42.537,168.657c47.762,20.896,152.986,239.553,76.12,271.642s-268.657,41.791-355.224,13.433
C-4.523,489.744-34.208,282.529,71.762,225.812"/><pathfill="#A4BBDC"d="M130.048,165.985c-20.535-13.645-45.842-57.117-8.595-71.078c37.247-13.96,150.902-13.327,157.585,0
c6.686,13.327,32.472,58.385,6.686,66.635C259.939,169.792,130.048,165.985,130.048,165.985z"/><pathfill="#A4BBDC"d="M131.463,536.259c0,0-52.984-211.194-17.91-229.104s154.851-36.193,180.597-10.447
S326.267,450.828,324,480.29C312.806,625.811,131.463,536.259,131.463,536.259z"/><ellipsefill="#FFFFFF"cx="176.986"cy="127.304"rx="28.359"ry="31.716"/><ellipsefill="#FFFFFF"cx="222.986"cy="127.304"rx="28.358"ry="31.716"/><circlecx="238.47"cy="142.789"r="10.261"/><circlecx="192.47"cy="142.789"r="10.261"/><pathfill="none"stroke="#ACACB1"stroke-width="3"d="M200.816,81.398c17.534-13.058,44.282-6.76,59.806,14.082"/><pathfill="none"stroke="#ACACB1"stroke-width="3"d="M133.259,79.191c7.845-20.406,33.821-29.373,58.078-20.047"/></svg></div><divclass="forest"><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div><divclass="back-tree"><svgviewBox="0 0 500 630"><usexlink:href="#plain-tree"/></svg></div></div><divclass="tree"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 500 630"><polygonfill="#BF0082"stroke="#54B948"stroke-width="3"points="281.493,628.864 203.881,628.864 213.646,583.342
271.728,583.342 "/><polygonfill="#2BBD88"stroke="#54B948"stroke-width="3"points="482.61,579.117 3.6,579.117 63.866,518.35 422.345,518.35 "/><polygonfill="#2BBD65"stroke="#54B948"stroke-width="3"points="416.375,513.499 69.835,513.499 113.435,415.177
372.777,415.177 "/><polygonfill="#2BB621"stroke="#54B948"stroke-width="3"points="393.136,410.177 93.073,410.177 130.825,359.431
355.385,359.431 "/><polygonfill="#65B621"stroke="#54B948"stroke-width="3"points="399.927,354.82 86.283,354.82 125.744,309.298 360.466,309.298
"/><polygonfill="#2B9774"stroke="#54B948"stroke-width="3"points="341.218,305.191 144.993,305.191 169.68,252.664 316.53,252.664
"/><polygonfill="#54B948"stroke="#54B948"stroke-width="3"points="326.63,174.855 159.581,174.855 180.597,138.672
305.614,138.672 "/><polygonfill="#006837"stroke="#54B948"stroke-width="3"points="293.438,134.729 192.772,134.729 205.438,89.207 280.772,89.207
"/><polygonfill="#7EB948"stroke="#54B948"stroke-width="3"points="334.092,248.512 152.119,248.512 175.013,179.855
311.196,179.855 "/><pathfill="none"stroke-width="1"stroke="#555555"d="M192.721,101.148c0,0,132.909,4.862,107.463,14.179c-52.985,19.401-172.271,23.914-139.553,39.552
c41.791,19.975,207.767,37.642,167.164,54.478c-30.597,12.687-217.571,5.611-176.865,23.88
c43.284,19.426,229.041,14.938,185.074,31.343c-50,18.657-287.066,31.463-232.089,54.478c32.09,13.434,368.389-5.906,296.269,11.194
c-72.389,17.164-363.166,21.901-293.284,47.015c47.761,17.164,288.806-22.447,282.089,7.463
c-3.732,16.62-332.836,13.433-301.493,35.074c18.169,12.545,400.622,11.227,322.388,31.344
c-52.238,13.433-360.82,19.776-346.269,34.328c13.806,13.806,394.681,5.599,368.189,32.09
C404.455,544.918,22.572,554.88,22.572,554.88"/></svg></div><divclass="star"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 500 630"><polygonfill="#FFD200"stroke="#FFB81F"stroke-width="3"points="277.102,87.356 244.793,77.88 218.67,99.123 217.698,65.467
189.422,47.187 221.131,35.863 229.779,3.323 250.348,29.979 283.967,28.148 264.971,55.947 "/></svg></div><divclass="lights-blur"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 500 630"><polygonfill="#FFD200"stroke="#FFB81F"stroke-width="3"points="277.102,87.356 244.793,77.88 218.67,99.123 217.698,65.467
189.422,47.187 221.131,35.863 229.779,3.323 250.348,29.979 283.967,28.148 264.971,55.947 "/><texttransform="matrix(1 0 0 1 197.2217 117.7964)"><tspanx="0"y="0">•</tspan><tspanx="23.682"y="1.215">•</tspan><tspanx="47.319"y="2.763">•</tspan><tspanx="70.965"y="4.86">•</tspan><tspanx="94.342"y="8.529">•</tspan><tspanx="83.368"y="17.798">•</tspan><tspanx="60.322"y="23.329">•</tspan><tspanx="37.026"y="27.758">•</tspan><tspanx="13.636"y="31.691">•</tspan><tspanx="-9.738"y="35.586">•</tspan><tspanx="-32.998"y="40.243">•</tspan><tspanx="-45.742"y="51.979">•</tspan><tspanx="-23.595"y="60.332">•</tspan><tspanx="-0.654"y="66.269">•</tspan><tspanx="22.492"y="71.437">•</tspan><tspanx="45.689"y="76.312">•</tspan><tspanx="68.885"y="81.193">•</tspan><tspanx="92.01"y="86.422">•</tspan><tspanx="114.845"y="92.766">•</tspan><tspanx="127.179"y="106.057">•</tspan><tspanx="104.359"y="111.836">•</tspan><tspanx="80.738"y="114.033">•</tspan><tspanx="57.082"y="115.419">•</tspan><tspanx="33.391"y="116.5">•</tspan><tspanx="9.702"y="117.535">•</tspan><tspanx="-13.992"y="118.77">•</tspan><tspanx="-37.606"y="120.688">•</tspan><tspanx="-58.625"y="127.756">•</tspan><tspanx="-36.995"y="136.588">•</tspan><tspanx="-13.654"y="140.668">•</tspan><tspanx="9.886"y="143.42">•</tspan><tspanx="33.5"y="145.536">•</tspan><tspanx="57.15"y="147.335">•</tspan><tspanx="80.815"y="149.053">•</tspan><tspanx="104.441"y="150.979">•</tspan><tspanx="127.942"y="153.912">•</tspan><tspanx="129"y="164.006">•</tspan><tspanx="105.954"y="169.612">•</tspan><tspanx="82.601"y="173.709">•</tspan><tspanx="59.175"y="177.233">•</tspan><tspanx="35.675"y="180.497">•</tspan><tspanx="12.179"y="183.663">•</tspan><tspanx="-11.315"y="186.864">•</tspan><tspanx="-34.784"y="190.233">•</tspan><tspanx="-58.194"y="193.981">•</tspan><tspanx="-81.471"y="198.543">•</tspan><tspanx="-103.972"y="205.797">•</tspan><tspanx="-94.517"y="218.954">•</tspan><tspanx="-70.924"y="221.329">•</tspan><tspanx="-47.257"y="222.184">•</tspan><tspanx="-23.52"y="222.502">•</tspan><tspanx="0.189"y="222.536">•</tspan><tspanx="23.888"y="222.399">•</tspan><tspanx="47.592"y="222.161">•</tspan><tspanx="71.299"y="221.866">•</tspan><tspanx="95.026"y="221.561">•</tspan><tspanx="118.721"y="221.29">•</tspan><tspanx="142.436"y="221.118">•</tspan><tspanx="166.15"y="221.167">•</tspan><tspanx="189.845"y="221.776">•</tspan><tspanx="200.524"y="227.512">•</tspan><tspanx="177.297"y="232.172">•</tspan><tspanx="153.772"y="235.29">•</tspan><tspanx="130.205"y="237.799">•</tspan><tspanx="106.582"y="239.993">•</tspan><tspanx="82.968"y="242.006">•</tspan><tspanx="59.335"y="243.932">•</tspan><tspanx="35.703"y="245.838">•</tspan><tspanx="12.06"y="247.79">•</tspan><tspanx="-11.561"y="249.856">•</tspan><tspanx="-35.14"y="252.143">•</tspan><tspanx="-58.706"y="254.834">•</tspan><tspanx="-82.155"y="258.344">•</tspan><tspanx="-104.895"y="264.774">•</tspan><tspanx="-91.972"y="277.114">•</tspan><tspanx="-68.429"y="279.797">•</tspan><tspanx="-44.722"y="280.11">•</tspan><tspanx="-21.025"y="279.477">•</tspan><tspanx="2.649"y="278.358">•</tspan><tspanx="26.329"y="276.979">•</tspan><tspanx="49.977"y="275.499">•</tspan><tspanx="73.647"y="274.04">•</tspan><tspanx="97.332"y="272.743">•</tspan><tspanx="121.03"y="271.807">•</tspan><tspanx="144.722"y="271.598">•</tspan><tspanx="168.384"y="273.155">•</tspan><tspanx="183.542"y="284.723">•</tspan><tspanx="160.489"y="289.819">•</tspan><tspanx="136.889"y="292.165">•</tspan><tspanx="113.241"y="293.866">•</tspan><tspanx="89.571"y="295.27">•</tspan><tspanx="65.875"y="296.524">•</tspan><tspanx="42.216"y="297.709">•</tspan><tspanx="18.533"y="298.895">•</tspan><tspanx="-5.141"y="300.137">•</tspan><tspanx="-28.835"y="301.512">•</tspan><tspanx="-52.487"y="303.122">•</tspan><tspanx="-76.107"y="305.163">•</tspan><tspanx="-99.624"y="308.165">•</tspan><tspanx="-117.273"y="317.588">•</tspan><tspanx="-94.25"y="322.305">•</tspan><tspanx="-70.611"y="324.192">•</tspan><tspanx="-46.935"y="325.573">•</tspan><tspanx="-23.26"y="326.721">•</tspan><tspanx="0.446"y="327.749">•</tspan><tspanx="24.133"y="328.713">•</tspan><tspanx="47.81"y="329.659">•</tspan><tspanx="71.52"y="330.625">•</tspan><tspanx="95.183"y="331.641">•</tspan><tspanx="118.893"y="332.762">•</tspan><tspanx="142.562"y="334.049">•</tspan><tspanx="166.216"y="335.622">•</tspan><tspanx="189.817"y="337.764">•</tspan><tspanx="213.127"y="341.924">•</tspan><tspanx="198.818"y="351.038">•</tspan><tspanx="175.324"y="354.274">•</tspan><tspanx="151.718"y="356.577">•</tspan><tspanx="128.077"y="358.485">•</tspan><tspanx="104.446"y="360.176">•</tspan><tspanx="80.784"y="361.741">•</tspan><tspanx="57.119"y="363.233">•</tspan><tspanx="33.444"y="364.688">•</tspan><tspanx="9.785"y="366.145">•</tspan><tspanx="-13.889"y="367.635">•</tspan><tspanx="-37.529"y="369.198">•</tspan><tspanx="-61.189"y="370.895">•</tspan><tspanx="-84.827"y="372.823">•</tspan><tspanx="-108.431"y="375.188">•</tspan><tspanx="-131.856"y="378.764">•</tspan><tspanx="-128.62"y="387.043">•</tspan><tspanx="-105.02"y="389.288">•</tspan><tspanx="-81.348"y="390.61">•</tspan><tspanx="-57.649"y="391.586">•</tspan><tspanx="-33.945"y="392.391">•</tspan><tspanx="-10.263"y="393.108">•</tspan><tspanx="13.448"y="393.792">•</tspan><tspanx="37.151"y="394.479">•</tspan><tspanx="60.855"y="395.209">•</tspan><tspanx="84.551"y="396.016">•</tspan><tspanx="108.226"y="396.948">•</tspan><tspanx="131.919"y="398.061">•</tspan><tspanx="155.596"y="399.456">•</tspan><tspanx="179.23"y="401.301">•</tspan><tspanx="202.792"y="404.016">•</tspan><tspanx="225.743"y="409.651">•</tspan><tspanx="213.95"y="422.446">•</tspan><tspanx="190.82"y="427.708">•</tspan><tspanx="167.407"y="431.377">•</tspan><tspanx="143.878"y="434.303">•</tspan><tspanx="120.295"y="436.768">•</tspan><tspanx="96.684"y="438.911">•</tspan><tspanx="73.031"y="440.815">•</tspan><tspanx="49.395"y="442.524">•</tspan><tspanx="25.738"y="444.077">•</tspan><tspanx="2.061"y="445.497">•</tspan><tspanx="-21.605"y="446.801">•</tspan><tspanx="-45.3"y="448.006">•</tspan><tspanx="-68.981"y="449.116">•</tspan><tspanx="-92.652"y="450.141">•</tspan><tspanx="-116.365"y="451.088">•</tspan><tspanx="-140.046"y="451.956">•</tspan><tspanx="-163.737"y="452.741">•</tspan></text></svg></div><divclass="lights"><svgversion="1.1"xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www.w3.org/1999/xlink"viewBox="0 0 500 630"><texttransform="matrix(1 0 0 1 197.2217 117.7964)"><tspanx="0"y="0">•</tspan><tspanx="23.682"y="1.215">•</tspan><tspanx="47.319"y="2.763">•</tspan><tspanx="70.965"y="4.86">•</tspan><tspanx="94.342"y="8.529">•</tspan><tspanx="83.368"y="17.798">•</tspan><tspanx="60.322"y="23.329">•</tspan><tspanx="37.026"y="27.758">•</tspan><tspanx="13.636"y="31.691">•</tspan><tspanx="-9.738"y="35.586">•</tspan><tspanx="-32.998"y="40.243">•</tspan><tspanx="-45.742"y="51.979">•</tspan><tspanx="-23.595"y="60.332">•</tspan><tspanx="-0.654"y="66.269">•</tspan><tspanx="22.492"y="71.437">•</tspan><tspanx="45.689"y="76.312">•</tspan><tspanx="68.885"y="81.193">•</tspan><tspanx="92.01"y="86.422">•</tspan><tspanx="114.845"y="92.766">•</tspan><tspanx="127.179"y="106.057">•</tspan><tspanx="104.359"y="111.836">•</tspan><tspanx="80.738"y="114.033">•</tspan><tspanx="57.082"y="115.419">•</tspan><tspanx="33.391"y="116.5">•</tspan><tspanx="9.702"y="117.535">•</tspan><tspanx="-13.992"y="118.77">•</tspan><tspanx="-37.606"y="120.688">•</tspan><tspanx="-58.625"y="127.756">•</tspan><tspanx="-36.995"y="136.588">•</tspan><tspanx="-13.654"y="140.668">•</tspan><tspanx="9.886"y="143.42">•</tspan><tspanx="33.5"y="145.536">•</tspan><tspanx="57.15"y="147.335">•</tspan><tspanx="80.815"y="149.053">•</tspan><tspanx="104.441"y="150.979">•</tspan><tspanx="127.942"y="153.912">•</tspan><tspanx="129"y="164.006">•</tspan><tspanx="105.954"y="169.612">•</tspan><tspanx="82.601"y="173.709">•</tspan><tspanx="59.175"y="177.233">•</tspan><tspanx="35.675"y="180.497">•</tspan><tspanx="12.179"y="183.663">•</tspan><tspanx="-11.315"y="186.864">•</tspan><tspanx="-34.784"y="190.233">•</tspan><tspanx="-58.194"y="193.981">•</tspan><tspanx="-81.471"y="198.543">•</tspan><tspanx="-103.972"y="205.797">•</tspan><tspanx="-94.517"y="218.954">•</tspan><tspanx="-70.924"y="221.329">•</tspan><tspanx="-47.257"y="222.184">•</tspan><tspanx="-23.52"y="222.502">•</tspan><tspanx="0.189"y="222.536">•</tspan><tspanx="23.888"y="222.399">•</tspan><tspanx="47.592"y="222.161">•</tspan><tspanx="71.299"y="221.866">•</tspan><tspanx="95.026"y="221.561">•</tspan><tspanx="118.721"y="221.29">•</tspan><tspanx="142.436"y="221.118">•</tspan><tspanx="166.15"y="221.167">•</tspan><tspanx="189.845"y="221.776">•</tspan><tspanx="200.524"y="227.512">•</tspan><tspanx="177.297"y="232.172">•</tspan><tspanx="153.772"y="235.29">•</tspan><tspanx="130.205"y="237.799">•</tspan><tspanx="106.582"y="239.993">•</tspan><tspanx="82.968"y="242.006">•</tspan><tspanx="59.335"y="243.932">•</tspan><tspanx="35.703"y="245.838">•</tspan><tspanx="12.06"y="247.79">•</tspan><tspanx="-11.561"y="249.856">•</tspan><tspanx="-35.14"y="252.143">•</tspan><tspanx="-58.706"y="254.834">•</tspan><tspanx="-82.155"y="258.344">•</tspan><tspanx="-104.895"y="264.774">•</tspan><tspanx="-91.972"y="277.114">•</tspan><tspanx="-68.429"y="279.797">•</tspan><tspanx="-44.722"y="280.11">•</tspan><tspanx="-21.025"y="279.477">•</tspan><tspanx="2.649"y="278.358">•</tspan><tspanx="26.329"y="276.979">•</tspan><tspanx="49.977"y="275.499">•</tspan><tspanx="73.647"y="274.04">•</tspan><tspanx="97.332"y="272.743">•</tspan><tspanx="121.03"y="271.807">•</tspan><tspanx="144.722"y="271.598">•</tspan><tspanx="168.384"y="273.155">•</tspan><tspanx="183.542"y="284.723">•</tspan><tspanx="160.489"y="289.819">•</tspan><tspanx="136.889"y="292.165">•</tspan><tspanx="113.241"y="293.866">•</tspan><tspanx="89.571"y="295.27">•</tspan><tspanx="65.875"y="296.524">•</tspan><tspanx="42.216"y="297.709">•</tspan><tspanx="18.533"y="298.895">•</tspan><tspanx="-5.141"y="300.137">•</tspan><tspanx="-28.835"y="301.512">•</tspan><tspanx="-52.487"y="303.122">•</tspan><tspanx="-76.107"y="305.163">•</tspan><tspanx="-99.624"y="308.165">•</tspan><tspanx="-117.273"y="317.588">•</tspan><tspanx="-94.25"y="322.305">•</tspan><tspanx="-70.611"y="324.192">•</tspan><tspanx="-46.935"y="325.573">•</tspan><tspanx="-23.26"y="326.721">•</tspan><tspanx="0.446"y="327.749">•</tspan><tspanx="24.133"y="328.713">•</tspan><tspanx="47.81"y="329.659">•</tspan><tspanx="71.52"y="330.625">•</tspan><tspanx="95.183"y="331.641">•</tspan><tspanx="118.893"y="332.762">•</tspan><tspanx="142.562"y="334.049">•</tspan><tspanx="166.216"y="335.622">•</tspan><tspanx="189.817"y="337.764">•</tspan><tspanx="213.127"y="341.924">•</tspan><tspanx="198.818"y="351.038">•</tspan><tspanx="175.324"y="354.274">•</tspan><tspanx="151.718"y="356.577">•</tspan><tspanx="128.077"y="358.485">•</tspan><tspanx="104.446"y="360.176">•</tspan><tspanx="80.784"y="361.741">•</tspan><tspanx="57.119"y="363.233">•</tspan><tspanx="33.444"y="364.688">•</tspan><tspanx="9.785"y="366.145">•</tspan><tspanx="-13.889"y="367.635">•</tspan><tspanx="-37.529"y="369.198">•</tspan><tspanx="-61.189"y="370.895">•</tspan><tspanx="-84.827"y="372.823">•</tspan><tspanx="-108.431"y="375.188">•</tspan><tspanx="-131.856"y="378.764">•</tspan><tspanx="-128.62"y="387.043">•</tspan><tspanx="-105.02"y="389.288">•</tspan><tspanx="-81.348"y="390.61">•</tspan><tspanx="-57.649"y="391.586">•</tspan><tspanx="-33.945"y="392.391">•</tspan><tspanx="-10.263"y="393.108">•</tspan><tspanx="13.448"y="393.792">•</tspan><tspanx="37.151"y="394.479">•</tspan><tspanx="60.855"y="395.209">•</tspan><tspanx="84.551"y="396.016">•</tspan><tspanx="108.226"y="396.948">•</tspan><tspanx="131.919"y="398.061">•</tspan><tspanx="155.596"y="399.456">•</tspan><tspanx="179.23"y="401.301">•</tspan><tspanx="202.792"y="404.016">•</tspan><tspanx="225.743"y="409.651">•</tspan><tspanx="213.95"y="422.446">•</tspan><tspanx="190.82"y="427.708">•</tspan><tspanx="167.407"y="431.377">•</tspan><tspanx="143.878"y="434.303">•</tspan><tspanx="120.295"y="436.768">•</tspan><tspanx="96.684"y="438.911">•</tspan><tspanx="73.031"y="440.815">•</tspan><tspanx="49.395"y="442.524">•</tspan><tspanx="25.738"y="444.077">•</tspan><tspanx="2.061"y="445.497">•</tspan><tspanx="-21.605"y="446.801">•</tspan><tspanx="-45.3"y="448.006">•</tspan><tspanx="-68.981"y="449.116">•</tspan><tspanx="-92.652"y="450.141">•</tspan><tspanx="-116.365"y="451.088">•</tspan><tspanx="-140.046"y="451.956">•</tspan><tspanx="-163.737"y="452.741">•</tspan></text></svg></div><divclass="snowfall"><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="snow"></div><divclass="codepen"></div><divclass="yeti-claws"><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div><divclass="claw"></div></div><script>var snowPlayers =[];makeItSnow();if(window.PointerEvent){
document.body.addEventListener('pointerenter', lightUp,false);
document.body.addEventListener('pointerleave', dim,false);}else{
document.body.addEventListener('mouseenter', lightUp,false);
document.body.addEventListener('touchstart', lightUp,false);
document.body.addEventListener('touchend', dim,false);
document.body.addEventListener('mouseleave', dim,false);}
document.body.addEventListener('keydown', lightUp,false);
document.body.addEventListener('keyup', dim,false);functionlightUp(e){
e.preventDefault();
document.body.classList.add('huzzah');if(snowPlayers.length && snowPlayers[0].playbackRate <2){
snowPlayers.forEach(function(item){
item.playbackRate = item.playbackRate *1.05;})}}functiondim(e){
e.preventDefault();
document.body.classList.remove('huzzah');}functionmakeItSnow(){var snows = document.querySelectorAll('.snow');if(!snows[0].animate){returnfalse;}for(var i =0, len = snows.length; i < len;++i){var snowball = snows[i];var scale = Math.random()*.8+.2;var player = snowball.animate([{transform:'translate3d('+(i / len *100)+'vw,0,0) scale('+ scale +')',opacity: scale
},{transform:'translate3d('+(i / len *100+10)+'vw,100vh,0) scale('+ scale +')',opacity: scale
}],{duration: Math.random()*3000+2000,iterations:Infinity,delay:-(Math.random()*5000)});
snowPlayers.push(player);}}</script></body></html>
四、总结
没什么好总结的
本文转载自: https://blog.csdn.net/m0_46464192/article/details/128434533
版权归原作者 Test客服 所有， 如有侵权，请联系我们删除。
版权归原作者 Test客服 所有， 如有侵权，请联系我们删除。