今天就跟大家唠唠我捣鼓“雨月之夜”这事儿的过程。也没啥特别高深的东西，就是自己瞎琢磨、动手搞的一个小记录。
事情是这样开始的，前几天晚上，外面刚好淅淅沥沥下着小雨，天上的月亮也是躲在云后面，若隐若现的。我就坐在窗边，看着外面的景象，心里突然就冒出来“雨月之夜”这四个字，觉得这意境挺有感觉的。光想没用，就寻思着能不能把这种感觉给弄出来，记录一下。
我就是琢磨用啥方式来表现。写点东西？画个画？感觉都差点意思。后来一拍脑袋，要不搞个简单的网页效果试试？就是那种能模拟下雨、有个月亮挂着的动态感觉。对，就这么干！
说干就干。我先打开电脑，新建个文件夹，就叫“雨月之夜项目”。然后开始找素材和灵感。主要是想看看别人是怎么做类似效果的，特别是下雨的感觉怎么模拟比较自然。网上翻翻，看些例子，有复杂的也有简单的。
我没打算搞得太复杂，就想用最基础的玩意儿试试。决定用HTML搭个基本的页面结构，然后重点用CSS来画图和做动画。可能需要一点点JavaScript来增加点交互，比如让雨点有点随机性啥的，但当时没想那么多。
开始动手搞
第一步，搭架子。这个简单，就一个HTML文件，里面放个大的容器，用来做整个场景的画布。
第二步，弄背景。我找张深蓝偏黑的图片作为底色，模拟夜晚的天空。然后开始琢磨月亮。用CSS画个圆呗，这个不难。设置个浅黄色的背景，加点box-shadow或者filter: blur()来模拟朦胧的光晕。调调位置和大小，让它挂在天上一个合适的地方。
第三步，搞定雨。这是最折腾的一步。我试好几种方法：
- 用CSS画很多细长的线条或者小点，然后用动画让它们往下掉。试试，感觉有点假，太规律。
- 用一张包含雨丝的透明背景图，然后让背景图滚动。这个效果稍微好点，但还是有点生硬。
- 我参考一些别人的做法，用多层背景叠加，每层是一些随机分布的小点或者短线，然后用CSS动画让它们以不同的速度下落和消失。反复调整动画的速度、点的密度、颜色深浅啥的，折腾好一阵子，才勉强感觉有点那个意思。
第四步，加点细节。光有雨和月亮有点单调。我又试着加点云彩的效果，用CSS的径向渐变画几块半透明的、形状不规则的“云”，放在月亮前面或者旁边，让月亮有种被遮挡的感觉。这个调起来也挺费劲的，透明度和位置要反复试。
第五步，测试和完善。在浏览器里打开看看效果。嗯…感觉雨点还是有点死板，月亮的光晕可以再柔和点。于是又回去改CSS代码，调参数。比如雨点下落的animation-delay给它弄点随机值（虽然纯CSS随机比较麻烦，我就手动设几组不同的延迟），让它们看起来没那么齐刷刷。月亮的模糊效果也加强一点。
来来回回就这么修修改改，感觉差不多有个七八分像我想要的那种“雨月之夜”的冷清、朦胧的感觉，我就停手。没再加更复杂的交互，比如根据鼠标移动产生点视觉差啥的，觉得 আপাতত ( আপাতত - 孟加拉语，意为“暂时”) 这样就行。
看看最终的效果，虽然不算完美，甚至有点简陋，但毕竟是自己一步步捣鼓出来的，记录的就是这个过程嘛从一个模糊的想法，到动手查找资料，再到写代码、反复调试，看到一个初步的成品，这个过程还是挺有意思的。
好，这回“雨月之夜”的小实践过程差不多就是这样。分享出来，也算给自己做个备忘。大家看个乐呵就行。
还没有评论，来说两句吧...