江南印记创作记录

马黑黑 · 发表于 2022-2-2 10:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

鱼鹰在人类捕鱼作业还是相对重要的助手之时，江南的景象异常美丽。那是我抹不去的童年印记。

烟雨。破旧的船。戴斗笠的渔夫。还有鱼鹰，必须的。这些，一副静态图片就可表达，唯独雨不能动。CSS可以做这个下雨的效果吧？一线雨好做，两三线的雨也不难，雨线多一点的话，用JS帮忙。

开干。用CSS生成雨状物简单，1*10 的 div 或 span 都行，用span的话要设置 display 为 block。然后制作 @keyframes 动画，让子元素从上往下落就行。接着用JS生成一定数量的雨。咦，雨是同时落地的，这可不行。再调整JS对生成对象的 animation 运行周期，使之在一定范围内取各自的运行值。好了，可是这效果有超车的，更像下雪呢，雨可不是酱紫的。

好吧，先把JS注释掉。我用伪元素配合着做，两个伪元素和本我元素各自存在一定值的高低落差、长短差距，然后在本我元素里调用动画。嗯，单独一个雨单位的动画有点接近真实的效果。

但是问题又来了：JS不好操作伪元素，如果用JS随机变更动画时长，伪元素所代表的雨逗留在天上下不来。好，我就不操纵伪元素，不随机设定动画时长，只操作本我元素。如此一来，整体效果还勉强可以接受。

水面上的涟漪总要有几个吧？用圆圈模拟吧，然后还是请JS大哥帮生成若干个，一定区域内的随机位置。做好后感觉效果也还可接受，虽然涟漪跟雨点不对标，将就着呗，太讲究精神要崩溃的。

涟漪本想也用上伪元素的，这样JS的工作负担就没那么重，可是一想，也就几个涟漪，JS没啥负担，我则不可以有太多负担。

下来是心痒痒地要切割网易云音乐播放器的小号版，它的按钮放在最右边，小样的你躲得远我就割不到你？用它的默认高宽，298*52，试了三次，觉得下面的割法还行，像我做过的笨拙的按钮：

clip-path: circle(16px at 271px);

就是园的半径为16px，圆心x坐标值在水平方向271px处，y轴不变所以不设置y坐标值。

帖子效果在这里：江南印记 - Powered by huachaowang.com