花好月圆│以代码寄相思,绘嫦娥之奔月
Posted 极客飞兔
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了花好月圆│以代码寄相思,绘嫦娥之奔月相关的知识,希望对你有一定的参考价值。
✨ 目录
🎈 中秋快乐
- 中秋节在即,自古以来,中秋节便有寄托思念故乡、亲人之情、祈盼丰收、幸福之意
- 中秋节,又称:
月节
、仲秋节
、月亮节
、团圆节
等 - 中秋节起源于上古时代,普及于汉代,定型于唐代,盛行于宋朝,是中国
四大传统
节日之一,也是现代国家法定节假日 - 作为程序员,工作一般都比较辛苦,好不容易有个三天假期,因为疫情很多人都好几年没有跟家人团聚了,正值中秋,作为技术人员,我们可以用自己的代码述说自己的相思之意
- 如下图所示,我们可以通过前端绘制出
但愿人长久,千里共婵娟
的中秋月圆之景,嫦娥奔月
寄托相思之意
🎈 月亮倒影
- 加载页面时,我们可以通过设置
定时器
,每隔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";
以上是关于花好月圆│以代码寄相思,绘嫦娥之奔月的主要内容,如果未能解决你的问题,请参考以下文章
运动学基于matlab嫦娥奔月仿真含Matlab源码 1238期