以代码寄相思，绘嫦娥之奔月，看程序猿过中秋

✨ 目录

🎈 中秋快乐

• 中秋节在即，自古以来，中秋节便有寄托思念故乡、亲人之情、祈盼丰收、幸福之意
• 中秋节，又称：月节、仲秋节、月亮节、团圆节等
• 中秋节起源于上古时代，普及于汉代，定型于唐代，盛行于宋朝，是中国 四大传统 节日之一，也是现代国家法定节假日
• 作为程序员，工作一般都比较辛苦，好不容易有个三天假期，因为疫情很多人都好几年没有跟家人团聚了，正值中秋，作为技术人员，我们可以用自己的代码述说自己的相思之意
• 如下图所示，我们可以通过前端绘制出 但愿人长久，千里共婵娟 的中秋月圆之景，嫦娥奔月 寄托相思之意

🎈 月亮倒影

• 加载页面时，我们可以通过设置 定时器，每隔 100毫秒 更新一下月亮和倒影的位置
• 前端可以通过 radial-gradient 设置元素的位置和样式

functionbg(widSpd, hgtSpd, posTop){return water.style.background ="radial-gradient("+ widSpd +"px "+ hgtSpd +"px at 50.5% "+ posTop +"%,rgb(250, 250, 249) 50%,rgb(247, 247, 245) 63%,rgb(7,7,70) 70%,rgb(18, 2, 56) 85%,rgb(13, 1, 59) 100%)";};

🎈 制造星星

• 关于星星，我们需要制作上方夜空真实的星星和水中星星倒影，两类星星倒影特效一样，只是位置不同
• 可以通过 transform 设置星星的位置，关于星星的移动速度可以通过 Math.random() 设置随机移动速度，让其显得更加的逼真

functioncreateStar(starNum, element, element2, scal, deg, rotY, rotX){var stars = starNum;var $stars =$(element);var r =2000;for(var i =0; i < stars; i++){var $star =$("<div/>").addClass(element2);
    $stars.append($star);}$("."+ element2).each(function(){var cur =$(this);var s =0.2+(Math.random()* scal);var curR = r +(Math.random()* deg);
    cur.css({transformOrigin:"0 0 "+ curR +"px",transform:" translate3d(0,0,-"+ curR +"px) rotateY("+(Math.random()* rotY)+"deg) rotateX("+(Math.random()* rotX)+"deg) rotateY("+-10+"deg) scale("+ s +","+ s +")"})})}createStar(40,".stars","star",1,300,360,-100);createStar(40,".starUnder","star1",1.5,360,300,200);

🎈 设置水面模糊

• css 中可以通过 blur 可以设置 模糊度，营造出水面波光荡漾的效果
• 让整体画面可以看起来更加的逼真

/** 方法一 **/filter:blur(1px)/** 方法二 **/backdrop-filter:blur(1px);

🎈 设置文字

• 设置文字，可以通过 animation 设置文字出现的特效
• 设置 dur 控制文字出现的时间间隔，word 是需要展示的字体数组

var word1 =["但","愿","人","长","久"];var word2 =["千","里","共","婵","娟"];functionword(className, dur, word){var i =0;var timeName =setInterval(function(){$(className).css('animation','appear 4s linear').append(`<p>${word[i]}</p>`);

    i++;if(i >= word.length){clearInterval(timeName);}}, dur);}

🎈 嫦娥奔月

• 创建 div 标签，包裹住嫦娥奔月的图片即可
• 可以通过 animation 设置嫦娥图片出现的动效，让其奔月的效果渐渐显现，更加的真实

var moon = document.getElementById("moon");var a = document.createElement("div");
a.className ="Ocean";
moon.appendChild(a);
moon.innerHTML +="<img id='change' src='images/change.png'>";var girl = document.getElementById("change");
girl.style.animation ="appear 6s linear";