css动画-海上生明月

378 阅读1分钟

1663894606580.png 我正在参加「码上掘金挑战赛」详情请看:码上掘金挑战赛来了!

中秋

中秋节,又称祭月节、月光诞、月夕、秋节、仲秋节、拜月节、月娘节、月亮节、团圆节等,源自天象崇拜,由上古时代秋夕祭月演变而来。

距离今年的中秋过去有段时间了,但一直记得今年的超大月亮,每每想起脑海中都会浮想起小时候课本里的那句"海上生明月,天涯共此时",画面感立马浮现。要不用代码浮现一下这个画面?咱正巧也是有点子糊口的功夫在身上的,说干就干。

效果展示

code.juejin.cn/pen/7146021… 点击运行效果如下:月亮从海面上悄悄升起,海浪轻轻推攘,流星飞舞,诗词慢慢浮现。

最后

最后感受一下一种场景:我站起身来,迎着扑面吹来的海风,爽性脱了鞋,赤着脚丫,缓缓地向着浅海滩迈去。空气中萦绕着海的味道,沙滩还残留着白天阳光的余温,那种纯朴的海洋气息,让我说不出的兴奋愉快。抬首,望着那温婉如玉的明月;低头,看着那一波又一波荡漾着海水,浪漫的情绪油然而生。

demo看着比较简单,但是css还是挺费时间的,特别是海浪的流动部分的动画和波浪的形状等。当然对于大佬们来说还是小操作啦。

快来动动你的小手指,尝试一下吧。