圣诞树代码 下雪
2024-09-13
23
圣诞树代码--下雪
实例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Minimalistic Winter Snowfall</title> <style> body { background: #134; margin: 0 auto; box-shadow: none; } h2 { color: black; font-size: 24px; margin-top: 720px; margin-left: 20px; font-family: "Josefin Sans", sans-serif; } h1 { margin-top: 70px; font-family: "Josefin Sans", sans-serif; color: white; font-size: 52px; letter-spacing: 9px; } #wrapper { width: 100%; height: 20px; } #snow { background: white; width: 100%; min-height: 450px; margin-top: 450px; display: inline-block; } .gran { height: 400px; width: 200px; margin-top: -270px; } .leaves { width: 0; height: 0; border-left: 85px solid transparent; border-right: 85px solid transparent; border-bottom: 300px solid #228b57; z-index: 50; position: relative; } .left { width: 0; height: 0; border-left: 85px solid transparent; border-bottom: 300px solid #1e7b4d; display: inline-block; margin-left: -85px; z-index: -1231; position: relative; } .top { width: 0; height: 0; border-left: 28px solid transparent; border-right: 28px solid transparent; border-bottom: 100px solid white; display: inline-block; margin-left: -85px; z-index: 100; position: absolute; margin-top: -0px; margin-left: -28px; } .foot { background: #38230e; width: 30px; height: 60px; margin-top: -5px; margin-right: 20px; display: inline-block; margin-left: -14px; } #subfoot { background: green; width: 30px; height: 60px; display: inline-block; } </style> </head> <body> <div id="wrapper"> <center><h1>Merry Christmas</h1></center> <div id="snow"> <center> <div class="gran"> <div class="leaves"> <div class="top"></div> <div class="left"></div> <div class="foot"></div> </div> </div> </center> </div> </div> <h2></h2> <span id="s0" style=" position: absolute; font-family: Times; font-size: 28px; color: rgb(221, 221, 255); z-index: 1000; left: 1124.01px; top: 127.68px; " >*</span ><span id="s1" style=" position: absolute; font-family: Times; font-size: 25px; color: rgb(204, 204, 221); z-index: 1000; left: 187.272px; top: 456px; " >*</span ><span id="s2" style=" position: absolute; font-family: Verdana; font-size: 29px; color: rgb(243, 243, 243); z-index: 1000; left: 1371.44px; top: 758.64px; " >*</span ><span id="s3" style=" position: absolute; font-family: Arial; font-size: 26px; color: rgb(240, 255, 255); z-index: 1000; left: 1194.08px; top: 783.12px; " >*</span ><span id="s4" style=" position: absolute; font-family: Verdana; font-size: 14px; color: rgb(240, 255, 255); z-index: 1000; left: 1315.46px; top: 921.8px; " >*</span ><span id="s5" style=" position: absolute; font-family: Times; font-size: 27px; color: rgb(240, 255, 255); z-index: 1000; left: 1156.72px; top: 476.28px; " >*</span ><span id="s6" style=" position: absolute; font-family: Arial; font-size: 15px; color: rgb(221, 221, 255); z-index: 1000; left: 1215.41px; top: 104.4px; " >*</span ><span id="s7" style=" position: absolute; font-family: Arial; font-size: 29px; color: rgb(243, 243, 243); z-index: 1000; left: 818.44px; top: 650.76px; " >*</span ><span id="s8" style=" position: absolute; font-family: Arial; font-size: 12px; color: rgb(170, 170, 204); z-index: 1000; left: 768.15px; top: 105.12px; " >*</span ><span id="s9" style=" position: absolute; font-family: Times; font-size: 13px; color: rgb(221, 221, 255); z-index: 1000; left: 78.8216px; top: 48.36px; " >*</span ><span id="s10" style=" position: absolute; font-family: Verdana; font-size: 18px; color: rgb(243, 243, 243); z-index: 1000; left: 1555.61px; top: 904.6px; " >*</span ><span id="s11" style=" position: absolute; font-family: Times; font-size: 14px; color: rgb(170, 170, 204); z-index: 1000; left: 495.963px; top: 868.8px; " >*</span ><span id="s12" style=" position: absolute; font-family: Verdana; font-size: 19px; color: rgb(243, 243, 243); z-index: 1000; left: 767.591px; top: 658.92px; " >*</span ><span id="s13" style=" position: absolute; font-family: Times; font-size: 21px; color: rgb(204, 204, 221); z-index: 1000; left: 700.065px; top: 385.56px; " >*</span ><span id="s14" style=" position: absolute; font-family: Verdana; font-size: 25px; color: rgb(221, 221, 255); z-index: 1000; left: 89.7143px; top: 66px; " >*</span ><span id="s15" style=" position: absolute; font-family: Verdana; font-size: 18px; color: rgb(170, 170, 204); z-index: 1000; left: 424.157px; top: 388.8px; " >*</span ><span id="s16" style=" position: absolute; font-family: Arial; font-size: 12px; color: rgb(240, 255, 255); z-index: 1000; left: 513.475px; top: 362.88px; " >*</span ><span id="s17" style=" position: absolute; font-family: Arial; font-size: 24px; color: rgb(221, 221, 255); z-index: 1000; left: 796.611px; top: 751.68px; " >*</span ><span id="s18" style=" position: absolute; font-family: Times; font-size: 22px; color: rgb(221, 221, 255); z-index: 1000; left: 1576.35px; top: 195.36px; " >*</span ><span id="s19" style=" position: absolute; font-family: Verdana; font-size: 20px; color: rgb(170, 170, 204); z-index: 1000; left: 264.656px; top: 501.6px; " >*</span ><span id="s20" style=" position: absolute; font-family: Verdana; font-size: 20px; color: rgb(204, 204, 221); z-index: 1000; left: 717.645px; top: 590.4px; " >*</span ><span id="s21" style=" position: absolute; font-family: Times; font-size: 26px; color: rgb(221, 221, 255); z-index: 1000; left: 1539.55px; top: 34.32px; " >*</span ><span id="s22" style=" position: absolute; font-family: Arial; font-size: 25px; color: rgb(170, 170, 204); z-index: 1000; left: 955.748px; top: 627px; " >*</span ><span id="s23" style=" position: absolute; font-family: Verdana; font-size: 19px; color: rgb(204, 204, 221); z-index: 1000; left: 391.104px; top: 595.08px; " >*</span ><span id="s24" style=" position: absolute; font-family: Arial; font-size: 26px; color: rgb(240, 255, 255); z-index: 1000; left: 1366.48px; top: 817.44px; " >*</span ><span id="s25" style=" position: absolute; font-family: Times; font-size: 15px; color: rgb(243, 243, 243); z-index: 1000; left: 974.126px; top: 325.8px; " >*</span ><span id="s26" style=" position: absolute; font-family: Verdana; font-size: 24px; color: rgb(170, 170, 204); z-index: 1000; left: 164.209px; top: 181.44px; " >*</span ><span id="s27" style=" position: absolute; font-family: Verdana; font-size: 23px; color: rgb(243, 243, 243); z-index: 1000; left: 266.706px; top: 262.2px; " >*</span ><span id="s28" style=" position: absolute; font-family: Arial; font-size: 13px; color: rgb(240, 255, 255); z-index: 1000; left: 444.645px; top: 728.6px; " >*</span ><span id="s29" style=" position: absolute; font-family: Times; font-size: 28px; color: rgb(243, 243, 243); z-index: 1000; left: 1552.64px; top: 631.68px; " >*</span ><span id="s30" style=" position: absolute; font-family: Verdana; font-size: 27px; color: rgb(221, 221, 255); z-index: 1000; left: 155.014px; top: 460.08px; " >*</span ><span id="s31" style=" position: absolute; font-family: Verdana; font-size: 23px; color: rgb(243, 243, 243); z-index: 1000; left: 624.684px; top: 449.88px; " >*</span ><span id="s32" style=" position: absolute; font-family: Arial; font-size: 25px; color: rgb(240, 255, 255); z-index: 1000; left: 279.637px; top: 858px; " >*</span ><span id="s33" style=" position: absolute; font-family: Arial; font-size: 29px; color: rgb(221, 221, 255); z-index: 1000; left: 1115.94px; top: 184.44px; " >*</span ><span id="s34" style=" position: absolute; font-family: Times; font-size: 29px; color: rgb(204, 204, 221); z-index: 1000; left: 732.174px; top: 313.2px; " >*</span ><span id="s35" style=" position: absolute; font-family: Times; font-size: 13px; color: rgb(204, 204, 221); z-index: 1000; left: 178.807px; top: 474.24px; " >*</span ><span id="s36" style=" position: absolute; font-family: Times; font-size: 23px; color: rgb(240, 255, 255); z-index: 1000; left: 1595.4px; top: 645.84px; " >*</span ><span id="s37" style=" position: absolute; font-family: Verdana; font-size: 13px; color: rgb(204, 204, 221); z-index: 1000; left: 34.1965px; top: 443.04px; " >*</span ><span id="s38" style=" position: absolute; font-family: Times; font-size: 18px; color: rgb(240, 255, 255); z-index: 1000; left: 157.048px; top: 643.68px; " >*</span ><span id="s39" style=" position: absolute; font-family: Verdana; font-size: 20px; color: rgb(170, 170, 204); z-index: 1000; left: 907.196px; top: 501.6px; " >*</span ><span id="s40" style=" position: absolute; font-family: Times; font-size: 13px; color: rgb(243, 243, 243); z-index: 1000; left: 1505.31px; top: 521.04px; " >*</span ><span id="s41" style=" position: absolute; font-family: Arial; font-size: 12px; color: rgb(221, 221, 255); z-index: 1000; left: 994.975px; top: 688.4px; " >*</span ><span id="s42" style=" position: absolute; font-family: Arial; font-size: 16px; color: rgb(204, 204, 221); z-index: 1000; left: 1095.81px; top: 145.92px; " >*</span ><span id="s43" style=" position: absolute; font-family: Verdana; font-size: 21px; color: rgb(204, 204, 221); z-index: 1000; left: 1215.04px; top: 388.08px; " >*</span ><span id="s44" style=" position: absolute; font-family: Times; font-size: 23px; color: rgb(170, 170, 204); z-index: 1000; left: 1127.56px; top: 259.44px; " >*</span ><span id="s45" style=" position: absolute; font-family: Times; font-size: 12px; color: rgb(221, 221, 255); z-index: 1000; left: 1511.4px; top: 269.28px; " >*</span ><span id="s46" style=" position: absolute; font-family: Verdana; font-size: 26px; color: rgb(204, 204, 221); z-index: 1000; left: 1083.4px; top: 514.8px; " >*</span ><span id="s47" style=" position: absolute; font-family: Arial; font-size: 15px; color: rgb(221, 221, 255); z-index: 1000; left: 875.694px; top: 926px; " >*</span ><span id="s48" style=" position: absolute; font-family: Verdana; font-size: 23px; color: rgb(243, 243, 243); z-index: 1000; left: 39.9193px; top: 207px; " >*</span ><span id="s49" style=" position: absolute; font-family: Times; font-size: 29px; color: rgb(170, 170, 204); z-index: 1000; left: 251.65px; top: 570.72px; " >*</span ><span id="s50" style=" position: absolute; font-family: Arial; font-size: 24px; color: rgb(170, 170, 204); z-index: 1000; left: 424.297px; top: 293.76px; " >*</span ><span id="s51" style=" position: absolute; font-family: Arial; font-size: 24px; color: rgb(243, 243, 243); z-index: 1000; left: 512.692px; top: 178.56px; " >*</span ><span id="s52" style=" position: absolute; font-family: Times; font-size: 27px; color: rgb(243, 243, 243); z-index: 1000; left: 733.927px; top: 887.76px; " >*</span ><span id="s53" style=" position: absolute; font-family: Verdana; font-size: 24px; color: rgb(221, 221, 255); z-index: 1000; left: 956.91px; top: 815.04px; " >*</span ><span id="s54" style=" position: absolute; font-family: Times; font-size: 17px; color: rgb(221, 221, 255); z-index: 1000; left: 1571.48px; top: 436.56px; " >*</span ><span id="s55" style=" position: absolute; font-family: Times; font-size: 22px; color: rgb(204, 204, 221); z-index: 1000; left: 1180.86px; top: 60.72px; " >*</span ><span id="s56" style=" position: absolute; font-family: Times; font-size: 14px; color: rgb(204, 204, 221); z-index: 1000; left: 1107.12px; top: 640.08px; " >*</span ><span id="s57" style=" position: absolute; font-family: Verdana; font-size: 24px; color: rgb(204, 204, 221); z-index: 1000; left: 300.009px; top: 480.96px; " >*</span ><span id="s58" style=" position: absolute; font-family: Times; font-size: 22px; color: rgb(170, 170, 204); z-index: 1000; left: 63.1754px; top: 942.48px; " >*</span ><span id="s59" style=" position: absolute; font-family: Verdana; font-size: 14px; color: rgb(240, 255, 255); z-index: 1000; left: 340.304px; top: 420px; " >*</span ><span id="s60" style=" position: absolute; font-family: Arial; font-size: 12px; color: rgb(243, 243, 243); z-index: 1000; left: 1147.03px; top: 577.44px; " >*</span ><span id="s61" style=" position: absolute; font-family: Times; font-size: 12px; color: rgb(240, 255, 255); z-index: 1000; left: 1401.41px; top: 430.56px; " >*</span ><span id="s62" style=" position: absolute; font-family: Times; font-size: 18px; color: rgb(243, 243, 243); z-index: 1000; left: 715.939px; top: 259.2px; " >*</span ><span id="s63" style=" position: absolute; font-family: Arial; font-size: 19px; color: rgb(243, 243, 243); z-index: 1000; left: 1602.9px; top: 250.8px; " >*</span ><span id="s64" style=" position: absolute; font-family: Verdana; font-size: 18px; color: rgb(243, 243, 243); z-index: 1000; left: 771.873px; top: 790.56px; " >*</span ><span id="s65" style=" position: absolute; font-family: Verdana; font-size: 13px; color: rgb(243, 243, 243); z-index: 1000; left: 410.193px; top: 457.08px; " >*</span ><span id="s66" style=" position: absolute; font-family: Arial; font-size: 25px; color: rgb(243, 243, 243); z-index: 1000; left: 573.379px; top: 621px; " >*</span ><span id="s67" style=" position: absolute; font-family: Arial; font-size: 24px; color: rgb(170, 170, 204); z-index: 1000; left: 234.191px; top: 437.76px; " >*</span ><span id="s68" style=" position: absolute; font-family: Times; font-size: 19px; color: rgb(204, 204, 221); z-index: 1000; left: 490.158px; top: 526.68px; " >*</span ><span id="s69" style=" position: absolute; font-family: Times; font-size: 16px; color: rgb(170, 170, 204); z-index: 1000; left: 998.221px; top: 817.2px; " >*</span ><span id="s70" style=" position: absolute; font-family: Arial; font-size: 14px; color: rgb(221, 221, 255); z-index: 1000; left: 523.104px; top: 697.8px; " >*</span ><span id="s71" style=" position: absolute; font-family: Verdana; font-size: 13px; color: rgb(243, 243, 243); z-index: 1000; left: 728.938px; top: 521.04px; " >*</span ><span id="s72" style=" position: absolute; font-family: Verdana; font-size: 26px; color: rgb(221, 221, 255); z-index: 1000; left: 1454.58px; top: 274.56px; " >*</span ><span id="s73" style=" position: absolute; font-family: Arial; font-size: 23px; color: rgb(204, 204, 221); z-index: 1000; left: 891.815px; top: 248.4px; " >*</span ><span id="s74" style=" position: absolute; font-family: Times; font-size: 18px; color: rgb(221, 221, 255); z-index: 1000; left: 1609.11px; top: 596.16px; " >*</span ><span id="s75" style=" position: absolute; font-family: Verdana; font-size: 20px; color: rgb(204, 204, 221); z-index: 1000; left: 232.076px; top: 108px; " >*</span ><span id="s76" style=" position: absolute; font-family: Times; font-size: 25px; color: rgb(221, 221, 255); z-index: 1000; left: 1539.61px; top: 828px; " >*</span ><span id="s77" style=" position: absolute; font-family: Times; font-size: 28px; color: rgb(221, 221, 255); z-index: 1000; left: 1400.4px; top: 843.36px; " >*</span ><span id="s78" style=" position: absolute; font-family: Times; font-size: 19px; color: rgb(204, 204, 221); z-index: 1000; left: 186.046px; top: 462.84px; " >*</span ><span id="s79" style=" position: absolute; font-family: Verdana; font-size: 25px; color: rgb(204, 204, 221); z-index: 1000; left: 1364.82px; top: 933px; " >*</span ><span id="s80" style=" position: absolute; font-family: Times; font-size: 21px; color: rgb(204, 204, 221); z-index: 1000; left: 1591.44px; top: 95.76px; " >*</span ><span id="s81" style=" position: absolute; font-family: Verdana; font-size: 14px; color: rgb(221, 221, 255); z-index: 1000; left: 1012.58px; top: 694.8px; " >*</span ><span id="s82" style=" position: absolute; font-family: Verdana; font-size: 18px; color: rgb(204, 204, 221); z-index: 1000; left: 266.078px; top: 62.64px; " >*</span ><span id="s83" style=" position: absolute; font-family: Verdana; font-size: 20px; color: rgb(170, 170, 204); z-index: 1000; left: 139.875px; top: 352.8px; " >*</span ><span id="s84" style=" position: absolute; font-family: Times; font-size: 12px; color: rgb(240, 255, 255); z-index: 1000; left: 1259.2px; top: 588.96px; " >*</span ><span id="s85" style=" position: absolute; font-family: Arial; font-size: 27px; color: rgb(243, 243, 243); z-index: 1000; left: 658.329px; top: 891px; " >*</span ><span id="s86" style=" position: absolute; font-family: Verdana; font-size: 21px; color: rgb(240, 255, 255); z-index: 1000; left: 574.723px; top: 42.84px; " >*</span ><span id="s87" style=" position: absolute; font-family: Times; font-size: 23px; color: rgb(204, 204, 221); z-index: 1000; left: 622.491px; top: 218.04px; " >*</span ><span id="s88" style=" position: absolute; font-family: Times; font-size: 18px; color: rgb(170, 170, 204); z-index: 1000; left: 546.77px; top: 388.8px; " >*</span ><span id="s89" style=" position: absolute; font-family: Arial; font-size: 22px; color: rgb(204, 204, 221); z-index: 1000; left: 1143.21px; top: 316.8px; " >*</span ><span id="s90" style=" position: absolute; font-family: Times; font-size: 21px; color: rgb(204, 204, 221); z-index: 1000; left: 721.953px; top: 211.68px; " >*</span ><span id="s91" style=" position: absolute; font-family: Arial; font-size: 29px; color: rgb(240, 255, 255); z-index: 1000; left: 231.36px; top: 393.24px; " >*</span ><span id="s92" style=" position: absolute; font-family: Verdana; font-size: 24px; color: rgb(204, 204, 221); z-index: 1000; left: 1174.53px; top: 737.28px; " >*</span ><span id="s93" style=" position: absolute; font-family: Times; font-size: 15px; color: rgb(240, 255, 255); z-index: 1000; left: 107.765px; top: 14.4px; " >*</span ><span id="s94" style=" position: absolute; font-family: Verdana; font-size: 28px; color: rgb(221, 221, 255); z-index: 1000; left: 253.933px; top: 561.12px; " >*</span ><span id="s95" style=" position: absolute; font-family: Times; font-size: 21px; color: rgb(170, 170, 204); z-index: 1000; left: 1144.41px; top: 10.08px; " >*</span > <script> // The variables below edits the snowfall , feel free to edit var snowmax = 95; var snowcolor = new Array( "#aaaacc", "#ddddff", "#ccccdd", "#f3f3f3", "#f0ffff" ); var snowtype = new Array("Times", "Arial", "Times", "Verdana"); //this one in special is funny var snowletter = "*"; var sinkspeed = 0.6; var snowmaxsize = 30; var snowminsize = 12; var snowingzone = 1; //the real deal starts here var snow = new Array(); var marginbottom; var marginright; var timer; var i_snow = 0; var x_mv = new Array(); var crds = new Array(); var lftrght = new Array(); var browserinfos = navigator.userAgent; var ie5 = document.all && document.getElementById && !browserinfos.match(/Opera/); var ns6 = document.getElementById && !document.all; var opera = browserinfos.match(/Opera/); var browserok = ie5 || ns6 || opera; function randommaker(range) { rand = Math.floor(range * Math.random()); return rand; } function initsnow() { if (ie5 || opera) { marginbottom = document.body.scrollHeight; marginright = document.body.clientWidth - 15; } else if (ns6) { marginbottom = document.body.scrollHeight; marginright = window.innerWidth - 15; } var snowsizerange = snowmaxsize - snowminsize; for (i = 0; i <= snowmax; i++) { crds[i] = 0; lftrght[i] = Math.random() * 15; x_mv[i] = 0.03 + Math.random() / 10; snow[i] = document.getElementById("s" + i); snow[i].style.fontFamily = snowtype[randommaker(snowtype.length)]; snow[i].size = randommaker(snowsizerange) + snowminsize; snow[i].style.fontSize = snow[i].size + "px"; snow[i].style.color = snowcolor[randommaker(snowcolor.length)]; snow[i].style.zIndex = 1000; snow[i].sink = (sinkspeed * snow[i].size) / 5; if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size); } if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size); } if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4; } if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2; } snow[i].posy = randommaker( 2 * marginbottom - marginbottom - 2 * snow[i].size ); snow[i].style.left = snow[i].posx + "px"; snow[i].style.top = snow[i].posy + "px"; } movesnow(); } function movesnow() { for (i = 0; i <= snowmax; i++) { crds[i] += x_mv[i]; snow[i].posy += snow[i].sink; snow[i].style.left = snow[i].posx + lftrght[i] * Math.sin(crds[i]) + "px"; snow[i].style.top = snow[i].posy + "px"; if ( snow[i].posy >= marginbottom - 2 * snow[i].size || parseInt(snow[i].style.left) > marginright - 3 * lftrght[i] ) { if (snowingzone == 1) { snow[i].posx = randommaker(marginright - snow[i].size); } if (snowingzone == 2) { snow[i].posx = randommaker(marginright / 2 - snow[i].size); } if (snowingzone == 3) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 4; } if (snowingzone == 4) { snow[i].posx = randommaker(marginright / 2 - snow[i].size) + marginright / 2; } snow[i].posy = 0; } } var timer = setTimeout("movesnow()", 50); } for (i = 0; i <= snowmax; i++) { document.write( "<span id='s" + i + "' style='position:absolute;top:-" + snowmaxsize + "'>" + snowletter + "</span>" ); } if (browserok) { window.onload = initsnow; } </script> </body> </html>
实例图片如下:
赞一波!
相关文章
- 【说站】python代码提速有哪些方法
- iOS 图片压缩方法的示例代码
- php语法技巧代码实例
- PHP平滑关闭/重启的实现代码
- PHP实现生成二维码代码展示
- 谷歌的代码即政策允许机器人编写自己的代码
- 自研、好用、够快、稳定、代码可读性强的ORM
- git commit 代码提交规范
- PHP 代码复用机制 trait
- VSCode 用户代码片段和生成器
- 春节代码 新年快乐html 灯笼js
- 表白代码,爱心树html
- git pull 从远程获取代码并合并本地的版本
- 使用C#的Socket实现最简单的TCP通信示例代码
- vscode中自动将json格式的内容自动生成对应的代码
- 代码写得好 在哪里都能蹦迪
- C#检测网络端口是否被占用的参考代码
- vscode打开代码中文显示乱码的问题
- HTML-CSS-JS Prettify 代码格式化插件
- 有没有一个在线工具可以将Python代码转换为Java代码?
文章评论
评论问答