生活随笔
收集整理的這篇文章主要介紹了
以代码寄相思，绘嫦娥之奔月，看程序猿过中秋
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
? 目錄
- 🎈 中秋快樂
- 🎈 月亮倒影
- 🎈 制造星星
- 🎈 設置水面模糊
- 🎈 設置文字
- 🎈 嫦娥奔月
🎈 中秋快樂
- 中秋節在即，自古以來，中秋節便有寄托思念故鄉、親人之情、祈盼豐收、幸福之意
- 中秋節，又稱：月節、仲秋節、月亮節、團圓節等
- 中秋節起源于上古時代，普及于漢代，定型于唐代，盛行于宋朝，是中國 四大傳統 節日之一，也是現代國家法定節假日
- 作為程序員，工作一般都比較辛苦，好不容易有個三天假期，因為疫情很多人都好幾年沒有跟家人團聚了，正值中秋，作為技術人員，我們可以用自己的代碼述說自己的相思之意
- 如下圖所示，我們可以通過前端繪制出 但愿人長久，千里共嬋娟 的中秋月圓之景，嫦娥奔月 寄托相思之意
🎈 月亮倒影
- 加載頁面時，我們可以通過設置 定時器，每隔 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";
總結
以上是生活随笔為你收集整理的以代码寄相思，绘嫦娥之奔月，看程序猿过中秋的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
