✨ 目录
🎈 中秋快乐🎈 月亮倒影🎈 制造星星🎈 设置水面模糊🎈 设置文字🎈 嫦娥奔月
🎈 中秋快乐
中秋节在即，自古以来，中秋节便有寄托思念故乡、亲人之情、祈盼丰收、幸福之意中秋节，又称：月节、仲秋节、月亮节、团圆节等中秋节起源于上古时代，普及于汉代，定型于唐代，盛行于宋朝，是中国四大传统节日之一，也是现代国家法定节假日作为程序员，工作一般都比较辛苦，好不容易有个三天假期，因为疫情很多人都好几年没有跟家人团聚了，正值中秋，作为技术人员，我们可以用自己的代码述说自己的相思之意如下图所示，我们可以通过前端绘制出但愿人长久，千里共婵娟的中秋月圆之景，嫦娥奔月寄托相思之意🎈 月亮倒影
加载页面时，我们可以通过设置定时器，每隔100毫秒更新一下月亮和倒影的位置前端可以通过radial-gradient设置元素的位置和样式function bg(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()设置随机移动速度，让其显得更加的逼真function createStar(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 = ["千", "里", "共", "婵", "娟"];function word(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";
