江南印记创作记录
鱼鹰在人类捕鱼作业还是相对重要的助手之时，江南的景象异常美丽。那是我抹不去的童年印记。烟雨。破旧的船。戴斗笠的渔夫。还有鱼鹰，必须的。这些，一副静态图片就可表达，唯独雨不能动。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
看着是满天雨丝飘落，原来有这么多讲究呢。黑黑辛苦了{:4_187:} “再调整JS对生成对象的 animation 运行周期。”
这个一直不甚了了，看起来我是做不出来的{:4_191:} 红影 发表于 2022-2-2 12:28
看着是满天雨丝飘落，原来有这么多讲究呢。黑黑辛苦了
将就将就，不那么讲究 红影 发表于 2022-2-2 12:30
“再调整JS对生成对象的 animation 运行周期。”
这个一直不甚了了，看起来我是做不出来的
JS从头到尾编写，需要有JS基础知识，这个要慢慢来 马黑黑 发表于 2022-2-2 13:40
将就将就，不那么讲究
非常真实的感觉了，黑黑厉害{:4_187:} 马黑黑 发表于 2022-2-2 13:41
JS从头到尾编写，需要有JS基础知识，这个要慢慢来
嗯嗯，我现在还欠缺很多。 红影 发表于 2022-2-2 14:13
嗯嗯，我现在还欠缺很多。
JS，基本没什么基础。不急的 红影 发表于 2022-2-2 14:13
非常真实的感觉了，黑黑厉害
{:4_206:} 马黑黑 发表于 2022-2-2 14:26
JS，基本没什么基础。不急的
那东西我怎么看怎么觉得复杂{:5_102:} 红影 发表于 2022-2-2 14:29
那东西我怎么看怎么觉得复杂
因为还没入门 我来学习整个正着过程，老黑写得真好。谢谢！{:4_190:} 加林森 发表于 2022-2-2 17:19
我来学习整个正着过程，老黑写得真好。谢谢！
那个是大概的思路。雨丝的制作，我已经单独写出来了 马黑黑 发表于 2022-2-2 17:27
那个是大概的思路。雨丝的制作，我已经单独写出来了
嗯嗯，看明白了的。 马黑黑 发表于 2022-2-2 14:31
因为还没入门
是的，还没明白它的运作原理。 红影 发表于 2022-2-2 19:34
是的，还没明白它的运作原理。
要先知道概念 加林森 发表于 2022-2-2 18:09
嗯嗯，看明白了的。
挺好
马黑黑 发表于 2022-2-2 20:27
挺好
嗯嗯 马黑黑 发表于 2022-2-2 20:16
要先知道概念
嗯嗯，这个需要一点点学习了。 红影 发表于 2022-2-2 20:44
嗯嗯，这个需要一点点学习了。
慢慢积累
页:
[1]
2