【HTML】动态圣诞树
最经看到最多的就是圣诞树的实现！今天的排行榜是Python实现圣诞树🎄，明天是C语言实现圣诞树。
大家都太卷了，唉！！！😲
虽然本人并不喜欢过西方的节日，但是还是在此祝各位圣诞节快乐，
并在文章结尾为大家准备了福利❤️🥰
⬇️下面，我将为大家献上圣诞节干货。💕
HTML代码部分
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <title>圣诞节快乐</title> <link rel="stylesheet" href="./style.css"> </head> <body> <section class="container1"> <svg class="combos" width="45" height="47" viewBox="0 0 45 47" fill="none" xmlns="http://www.w3.org/2000/svg"> <mask id="path-1-inside-1_6_5" fill="white"> <path class="bell" fill-rule="evenodd" clip-rule="evenodd" d="M20.7164 23.6882C21.4781 25.3813 21.536 27.3076 20.8774 29.0434C17.2985 37.0963 16.6239 40.0715 16.9586 43.5999L10.6545 41.6229C10.644 41.8252 10.6023 42.0294 10.5266 42.229C10.1347 43.2617 8.97989 43.7813 7.94716 43.3894C6.91443 42.9976 6.3949 41.8427 6.78674 40.81C6.86248 40.6104 6.9667 40.43 7.09304 40.2716L1.06425 37.5691C4.19357 34.0153 5.59328 30.8142 7.78797 24.0769C8.44657 22.3411 9.76773 20.938 11.4608 20.1764C13.1539 19.4147 15.0802 19.3568 16.816 20.0154C18.5517 20.674 19.9548 21.9952 20.7164 23.6882Z"/> </mask> <path class="bell" d="M20.8774 29.0434L21.7912 29.4495L21.8025 29.4241L21.8124 29.3981L20.8774 29.0434ZM16.9586 43.5999L16.6593 44.5541L18.0963 45.0047L17.9541 43.5055L16.9586 43.5999ZM10.6545 41.6229L10.9538 40.6687L9.72287 40.2827L9.65588 41.571L10.6545 41.6229ZM7.09304 40.2716L7.87479 40.8952L8.67923 39.8867L7.50209 39.3591L7.09304 40.2716ZM1.06425 37.5691L0.313739 36.9083L-0.582957 37.9266L0.655211 38.4816L1.06425 37.5691ZM7.78797 24.0769L6.85301 23.7221L6.84454 23.7444L6.83714 23.7671L7.78797 24.0769ZM21.8124 29.3981C22.5651 27.4144 22.4989 25.2129 21.6284 23.278L19.8045 24.0985C20.4573 25.5497 20.507 27.2008 19.9425 28.6886L21.8124 29.3981ZM17.9541 43.5055C17.6457 40.2542 18.2198 37.4855 21.7912 29.4495L19.9636 28.6373C16.3772 36.707 15.6021 39.8887 15.9631 43.6943L17.9541 43.5055ZM10.3553 42.5771L16.6593 44.5541L17.2578 42.6457L10.9538 40.6687L10.3553 42.5771ZM9.65588 41.571C9.65068 41.6709 9.6301 41.7728 9.59163 41.8742L11.4615 42.5837C11.5745 42.286 11.6373 41.9796 11.6532 41.6749L9.65588 41.571ZM9.59163 41.8742C9.3957 42.3906 8.81828 42.6504 8.30191 42.4544L7.59241 44.3244C9.1415 44.9121 10.8738 44.1328 11.4615 42.5837L9.59163 41.8742ZM8.30191 42.4544C7.78555 42.2585 7.52578 41.6811 7.72171 41.1647L5.85178 40.4552C5.26401 42.0043 6.04332 43.7366 7.59241 44.3244L8.30191 42.4544ZM7.72171 41.1647C7.76018 41.0633 7.81238 40.9734 7.87479 40.8952L6.3113 39.648C6.12102 39.8865 5.96477 40.1575 5.85178 40.4552L7.72171 41.1647ZM0.655211 38.4816L6.684 41.1841L7.50209 39.3591L1.47329 36.6566L0.655211 38.4816ZM6.83714 23.7671C4.65262 30.4733 3.30352 33.5129 0.313739 36.9083L1.81477 38.23C5.08363 34.5176 6.53394 31.1552 8.73879 24.3866L6.83714 23.7671ZM11.0505 19.2644C9.11559 20.1349 7.6057 21.7384 6.85301 23.7221L8.72293 24.4316C9.28745 22.9438 10.4199 21.7412 11.8711 21.0883L11.0505 19.2644ZM17.1707 19.0804C15.187 18.3277 12.9855 18.3939 11.0505 19.2644L11.8711 21.0883C13.3223 20.4355 14.9734 20.3858 16.4612 20.9503L17.1707 19.0804ZM21.6284 23.278C20.7579 21.343 19.1544 19.8331 17.1707 19.0804L16.4612 20.9503C17.949 21.5149 19.1516 22.6473 19.8045 24.0985L21.6284 23.278Z" fill="#858585" mask="url(#path-1-inside-1_6_5)"/> <path class="leaf" d="M18 16C17.2477 15.4599 16.587 15.2399 15 15L17 14C14.8138 13.3855 13.531 13.0643 10 13L15 11C12.2894 10.8407 10.7758 10.8129 8.00002 10L11 8C9.09127 7.75342 8.12911 7.5703 7.00002 7L9.00002 6L5.00002 2C7.24831 2.95957 8.5069 3.5093 11 3L12 1C12.7243 2.04436 13.1948 2.77417 14 4L16 2C15.9625 2.76469 15.9897 4.72 16 7L18 3C18.2203 5.08384 18.4796 6.45889 19 9L21 5C21.9096 6.6254 22.072 7.7558 22 10L24 8C23.5137 9.99861 23.3098 11.1126 24 13" stroke="#00FF47"/> <path class="leaf" d="M12 6L23 16L24 15H25.5L26 11C26 11 28.5 15.5 28 13C27.5 10.5 27.3717 8.62984 27 6C27.0782 7.74424 27.6244 8.63848 30 10C30.6558 7.83556 30.688 6.54711 30 4L34 8C34.5262 6.2966 34.4537 5.44023 34 4L36 7C38.407 6.66369 39.3182 6.04607 41 5C40.1183 6.70982 39.6337 7.65427 39 9C39.0373 9.44451 39.477 9.66245 41 10L38 11C38.7096 11.1232 39.4901 11.4137 41 12C40.5229 12.2407 39.3631 12.4661 36 13C36.1371 13.4104 34.9111 13.6586 40 14C37.9131 15.0901 36.6294 15.7682 36 16L38 18C36.1971 17.5939 35.0037 17.3715 32 17V18.5C30.1866 17.1312 29.0319 17.14 27 17L36 9" stroke="#00FF47" stroke-linecap="round"/> <path class="cherry" fill-rule="evenodd" clip-rule="evenodd" d="M24.7 21.5C24.7 22.1627 24.1628 22.7 23.5 22.7C23.3071 22.7 23.1248 22.6545 22.9632 22.5735L22.829 22.8419C23.0309 22.9431 23.2588 23 23.5 23C24.3284 23 25 22.3284 25 21.5C25 20.6716 24.3284 20 23.5 20C22.6716 20 22 20.6716 22 21.5C22 22.0155 22.2601 22.4704 22.6562 22.7404L22.7919 22.4689C22.4937 22.2506 22.3 21.8979 22.3 21.5C22.3 20.8373 22.8373 20.3 23.5 20.3C24.1628 20.3 24.7 20.8373 24.7 21.5Z" fill="#D2042D"/> <path class="cherry" fill-rule="evenodd" clip-rule="evenodd" d="M21.7 20.5C21.7 21.1627 21.1628 21.7 20.5 21.7C20.3071 21.7 20.1248 21.6545 19.9632 21.5735L19.829 21.8419C20.0309 21.9431 20.2588 22 20.5 22C21.3284 22 22 21.3284 22 20.5C22 19.6716 21.3284 19 20.5 19C19.6716 19 19 19.6716 19 20.5C19 21.0155 19.2601 21.4704 19.6562 21.7404L19.7919 21.4689C19.4937 21.2506 19.3 20.8979 19.3 20.5C19.3 19.8373 19.8373 19.3 20.5 19.3C21.1628 19.3 21.7 19.8373 21.7 20.5Z" fill="#D2042D"/> <path class="cherry" fill-rule="evenodd" clip-rule="evenodd" d="M24.7 18.5C24.7 19.1627 24.1628 19.7 23.5 19.7C23.3071 19.7 23.1248 19.6545 22.9632 19.5735L22.829 19.8419C23.0309 19.9431 23.2588 20 23.5 20C24.3284 20 25 19.3284 25 18.5C25 17.6716 24.3284 17 23.5 17C22.6716 17 22 17.6716 22 18.5C22 19.0155 22.2601 19.4704 22.6562 19.7404L22.7919 19.4689C22.4937 19.2506 22.3 18.8979 22.3 18.5C22.3 17.8373 22.8373 17.3 23.5 17.3C24.1628 17.3 24.7 17.8373 24.7 18.5Z" fill="#D2042D"/> <path class="bell" fill-rule="evenodd" clip-rule="evenodd" d="M28.401 21.1861C28.7029 21.0167 29.0209 20.8726 29.352 20.7565C30.8537 20.2299 32.503 20.3214 33.9372 21.0109C35.3633 21.6965 36.4606 22.9175 36.9906 24.4077C39.1187 31.7566 40.4971 34.9326 42.6078 37.3936L37.8413 39.3865L36.6511 39.8842L37.4297 40.9127C37.4901 40.9925 37.5401 41.0837 37.5759 41.1861C37.7587 41.7072 37.4844 42.2779 36.9632 42.4606C36.442 42.6434 35.8714 42.3691 35.6886 41.8479C35.6527 41.7455 35.6347 41.6431 35.6321 41.5431L35.5978 40.2536L34.3575 40.6082L29.2798 42.0602C29.1783 37.7885 28.0861 34.3512 25.6681 28.3823C25.1499 26.8865 25.2438 25.2461 25.93 23.8188C26.3199 23.0076 26.8831 22.3029 27.5705 21.7484L27.0689 20.8706C26.2096 21.5318 25.5073 22.39 25.0287 23.3855C24.2243 25.0587 24.1176 26.983 24.7319 28.7349C27.1941 34.8105 28.2269 38.1326 28.285 42.3447C28.2897 42.6854 28.2881 43.0319 28.2803 43.3861L29.2853 43.0987L33.6504 41.8505L34.6324 41.5697C34.6378 41.7722 34.6743 41.9774 34.745 42.1788C34.7884 42.3027 34.8428 42.4196 34.9067 42.5289C35.3804 43.3387 36.3757 43.7264 37.2941 43.4043C38.2126 43.0822 38.7477 42.1578 38.6119 41.2295C38.5936 41.1043 38.563 40.979 38.5196 40.8551C38.449 40.6537 38.3493 40.4707 38.2271 40.3091L39.1694 39.9151L43.3259 38.1772L44.3225 37.7605C44.0642 37.5069 43.8177 37.251 43.5807 36.9867C41.4966 34.6637 40.1429 31.7025 37.9432 24.102C37.3288 22.3501 36.0437 20.914 34.3705 20.1096C32.6972 19.3052 30.773 19.1985 29.0211 19.8128C28.6323 19.9492 28.2591 20.1185 27.9048 20.3179L28.401 21.1861Z" fill="#7D7D7D"/> </svg> <h1 class="merrychristmas">Merry</h1> </section> <section class="container2"> <h1 class="merrychristmas">Christmas</h1> </section> <section class="snowflakes"> <svg class="snowflake" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="6.00002" y1="0.181818" x2="6.00002" y2="5.63636" stroke-width="0.363636" stroke-linecap="round"/> <line x1="6.54548" y1="2.01292" x2="7.83113" y2="0.727275" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.54279 2.27005)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0 -1 -1 0 5.81821 12)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.54548 9.72995)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="5.54279" y1="9.98708" x2="4.25714" y2="11.2727" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.4907 10.4465)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(1 0 0 -1 9.39975 8.32709)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="8.87256" y1="9.21792" x2="8.87256" y2="11.0361" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 1.28567 10.127)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 1 1 0 3.4051 9.0361)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="2.51428" y1="8.50891" x2="0.696094" y2="8.50891" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 0.707107 0.707107 0.707107 10.8102 1.96881)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 -1 -1 0 8.69075 3.05972)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="9.58157" y1="3.58691" x2="11.3998" y2="3.58691" stroke-width="0.363636" stroke-linecap="round"/> <line x1="1.5428" y1="1.96881" x2="5.39975" y2="5.82575" stroke-width="0.363636" stroke-linecap="round"/> <line x1="3.22328" y1="2.8779" x2="3.22328" y2="1.05972" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-1 0 0 1 2.69609 3.76872)" stroke-width="0.363636" stroke-linecap="round"/> </svg> <svg class="snowflake" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="6.00002" y1="0.181818" x2="6.00002" y2="5.63636" stroke-width="0.363636" stroke-linecap="round"/> <line x1="6.54548" y1="2.01292" x2="7.83113" y2="0.727275" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.54279 2.27005)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0 -1 -1 0 5.81821 12)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.54548 9.72995)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="5.54279" y1="9.98708" x2="4.25714" y2="11.2727" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.4907 10.4465)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(1 0 0 -1 9.39975 8.32709)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="8.87256" y1="9.21792" x2="8.87256" y2="11.0361" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 1.28567 10.127)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 1 1 0 3.4051 9.0361)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="2.51428" y1="8.50891" x2="0.696094" y2="8.50891" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 0.707107 0.707107 0.707107 10.8102 1.96881)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 -1 -1 0 8.69075 3.05972)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="9.58157" y1="3.58691" x2="11.3998" y2="3.58691" stroke-width="0.363636" stroke-linecap="round"/> <line x1="1.5428" y1="1.96881" x2="5.39975" y2="5.82575" stroke-width="0.363636" stroke-linecap="round"/> <line x1="3.22328" y1="2.8779" x2="3.22328" y2="1.05972" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-1 0 0 1 2.69609 3.76872)" stroke-width="0.363636" stroke-linecap="round"/> </svg> <svg class="snowflake" width="13" height="12" viewBox="0 0 13 12" fill="none" xmlns="http://www.w3.org/2000/svg"> <line x1="6.00002" y1="0.181818" x2="6.00002" y2="5.63636" stroke-width="0.363636" stroke-linecap="round"/> <line x1="6.54548" y1="2.01292" x2="7.83113" y2="0.727275" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 5.54279 2.27005)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0 -1 -1 0 5.81821 12)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0.707107 0.707107 0.707107 -0.707107 6.54548 9.72995)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="5.54279" y1="9.98708" x2="4.25714" y2="11.2727" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 -0.707107 -0.707107 0.707107 10.4907 10.4465)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(1 0 0 -1 9.39975 8.32709)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="8.87256" y1="9.21792" x2="8.87256" y2="11.0361" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(0.707107 -0.707107 -0.707107 -0.707107 1.28567 10.127)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 1 1 0 3.4051 9.0361)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="2.51428" y1="8.50891" x2="0.696094" y2="8.50891" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="5.63636" y2="-0.181818" transform="matrix(-0.707107 0.707107 0.707107 0.707107 10.8102 1.96881)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(0 -1 -1 0 8.69075 3.05972)" stroke-width="0.363636" stroke-linecap="round"/> <line x1="9.58157" y1="3.58691" x2="11.3998" y2="3.58691" stroke-width="0.363636" stroke-linecap="round"/> <line x1="1.5428" y1="1.96881" x2="5.39975" y2="5.82575" stroke-width="0.363636" stroke-linecap="round"/> <line x1="3.22328" y1="2.8779" x2="3.22328" y2="1.05972" stroke-width="0.363636" stroke-linecap="round"/> <line x1="0.181818" y1="-0.181818" x2="2" y2="-0.181818" transform="matrix(-1 0 0 1 2.69609 3.76872)" stroke-width="0.363636" stroke-linecap="round"/> </svg> </section> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/gsap-latest-beta.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomEase3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/DrawSVGPlugin3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/ScrambleTextPlugin3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/SplitText3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomBounce3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/CustomWiggle3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/InertiaPlugin.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Draggable3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/EasePack3.min.js'></script> <script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/Flip.min.js'></script><script src="./script.js"></script> <canvas id="c" > <script> var collapsed = true; function toggle() { var fs = top.document.getElementsByTagName('frameset')[0]; var f = fs.getElementsByTagName('frame'); if (collapsed) { fs.rows = '250px,*'; fs.noResize = false; f[0].noResize = false; f[1].noResize = false; } else { fs.rows = '30px,*'; fs.noResize = true; f[0].noResize = true; f[1].noResize = true; } collapsed = !collapsed; } </script> <script> var b = document.body; var c = document.getElementsByTagName('canvas')[0]; var a = c.getContext('2d'); document.body.clientWidth; </script> <script> M=Math; Q=M.random;J=[]; U=16; T=M.sin; E=M.sqrt; for(O=k=0;x=z=j=i=k<200;) with(M[k]=k?c.cloneNode(0):c) { width=height=k?32:W=446; with(getContext('2d')) if(k>10|!k) for( font='60px Impact', V='rgba(';I=i*U,fillStyle=k?k==13?V+'205,205,215,.15)': V+(147+I)+','+(k%2?128+I:0)+','+I+',.5)':'#cca',i<7;) beginPath(fill(arc(U-i/3,24-i/2,k==13?4-(i++)/2:8-i++,0,M.PI*2,1))); else for(; x=T(i), y=Q()*2-1, D=x*x+y*y, B=E(D-x/.9-1.5*y+1), R=67*(B+1)*(L=k/9+.8)>>1, i++<W; ) if(D<1) beginPath(strokeStyle=V+R+','+(R+B*L>>0)+',40,.1)'), moveTo(U+x*8,U+y*8), lineTo(U+x*U,U+y*U), stroke(); for( y=H=k+E(k++)*25, R=Q()*W; P=3,j<H;) J[O++]=[ x+=T(R)*P+Q()*6-3,y+=Q()*U-8, z+=T(R-11)*P+Q()*6-3, j/H*20+((j+=U)>H&Q()>.8?Q(P=9)*4:0)>>1] } setInterval(function G(m,l) { A=T(D-11); if(l) return( m[2]-l[2])*A+(l[0]-m[0])*T(D); a.clearRect(0,0,W,W); J.sort(G); for(i=0; L=J[i++]; a.drawImage(M[L[3]+1],207+L[0]*A+L[2]*T(D)>>0,L[1]>>1)) { if(!(i%7)) a.drawImage(M[13], ((157*(i*i)+T(D*5+i*i)*5)%W)>>0, ((113*i+(D*i)/60)%(290+i/99))>>0); } D+=.02 },1) </script> </canvas> </body> </html>
CSS代码部分
@import url("https://fonts.googleapis.com/css2?family=Vujahday+Script&display=swap"); html { box-sizing: border-box; font-size: 4em; } *, *:before, *:after { box-sizing: inherit; } body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; text-align:center ; } ol, ul { list-style: none; } img { max-width: 100%; height: auto; } body { font-family: 'Vujahday Script', cursive; background-color: #2b2b2b; } .container1 { display: flex; position: relative; justify-content: center; align-items: center; margin-top: 5%; } .container1 .combos { position: relative; width: 150px; height: auto; left: 100; } .container1 .combos .bell { position: relative; } .container2 { display: flex; justify-content: center; align-items: center; } @keyframes neonRed { 0% { filter: drop-shadow(0px 0px 1px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 8px #2d92ff) drop-shadow(0px 0px 10px #56a8ff) drop-shadow(0px 0px 15px #94c8ff); } 100% { stroke: #94c8ff; filter: drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff); } } .snowflakes { display: flex; justify-content: center; } .snowflakes .snowflake { position: relative; width: 100px; height: auto; fill: none; stroke-width: 3; stroke: #717171; filter: 'drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff)'; align-self: flex-start; } .merryChristmas { animation: neonAnim 2s infinite alternate; } @keyframes neonAnim { from { text-shadow: 0 0 15px rgba(210, 4, 45, 0.7), 0 0 45px rgba(210, 4, 45, 0.7), 0 0 105px rgba(210, 4, 45, 0.7); } to { text-shadow: 0 0 10px rgba(210, 4, 45, 0.7), 0 0 25px rgba(210, 4, 45, 0.7), 0 0 65px rgba(210, 4, 45, 0.7); } } h2 { padding: .2em; transform: rotate(-5deg); }
JS代码部分
let merryChristmas = [document.getElementsByClassName('merrychristmas'), document.getElementsByClassName('christmas')] let snowFlake = document.getElementsByClassName('snowflake') let bell = document.getElementsByClassName('bell') var tl = gsap.timeline({repeat: -1}); var tl2 = gsap.timeline({repeat: -1}); var tl3 = gsap.timeline({repeat: -1}); let neonLetters = 'neonAnim 1s alternate infinite' let filters1 = 'drop-shadow(0px 0px 3px #fff) drop-shadow(0px 0px 5px #2d92ff) drop-shadow(0px 0px 7px #56a8ff) drop-shadow(0px 0px 10px #94c8ff)'; let filters2 = 'drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225) drop-shadow(0px 0px 1px #E1c225)' tl.to(snowFlake[0], {stroke: '#94c8ff', filter: filters1, stagger: .5, duration: .3}) .to(snowFlake[0], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3}) .to(snowFlake[1], {stroke: '#94c8ff', filter: filters1, stagger: .5, duration: .3}) .to(snowFlake[1], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3}) .to(snowFlake[2], {stroke: '#94c8ff', filter: filters1, duration: .3}) .to(snowFlake[2], {stroke: '#717171', filter: 'none', duration: .3}) tl2.to(bell[1], {stroke: '#e1c225', filter: filters2, stagger: .5, duration: .3}) .to(bell[1], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3}) .to(bell[2], {stroke: '#e1c225', filter: filters2, stagger: .5, duration: .3}) .to(bell[2], {stroke: '#717171', filter: 'none', stagger: .5, duration: .3}) merryChristmas.forEach(a => { tl3.to(a,{animation: neonLetters, color: '#D2042D', duration: .4}) .to(a,{animation: neonLetters, color: '#D2042D', duration: 1}) .to(a, {animation: '', color: '#858585', duration: .2}) })
最后，再次祝福大家，节日快乐！
喜欢该文章的话，欢迎大家一键三连！！😘
在此给大家推荐一个前端学习（干货）网址➡️ https://codepen.io
