逃离

红影

这个波浪的做法也太细腻逼真了，如此美妙的动态效果竟然是纯代码模拟的，太美了

红影

cubic-bezier() css中的三次贝塞尔曲线，对这个还真不熟。这样四条交织起伏的曲线好美啊
transform: translate3d(-90px,0,0);这个也不常见，结合下一句，就是X轴上的变化吧。

马黑黑

醉美水芙蓉 发表于 2024-10-8 21:23
欣赏黑黑老师代码波浪形高级特效！

红影

css还没看懂呢，接下里的svg也挺难懂，还要调用前面的设置，然后有自己的路径，这个路径以及视窗还有use的设置都没看懂。等着看解说文档

红影

这个制作太美了，很赞

马黑黑

红影 发表于 2024-10-8 21:38
这个波浪的做法也太细腻逼真了，如此美妙的动态效果竟然是纯代码模拟的，太美了

css+svg还是很厉害的

马黑黑

红影 发表于 2024-10-8 21:58
css还没看懂呢，接下里的svg也挺难懂，还要调用前面的设置，然后有自己的路径，这个路径以及视窗还有use的 ...

这个还需要解说吗

马黑黑

红影 发表于 2024-10-8 21:46
cubic-bezier() css中的三次贝塞尔曲线，对这个还真不熟。这样四条交织起伏的曲线好美啊
transfo ...

曲线是path路径，cubic-bezie 是用在CSS里替代最常见的 linear；3s 转换我们也不是没用过

马黑黑

花飞飞 发表于 2024-10-8 20:59
还有为了高度变化，四个Y值 设的也是不一样的，0357，加上透明 度，所以感觉层次更加丰富

马黑黑

花飞飞 发表于 2024-10-8 20:58
如果想让波浪覆盖的高一些，
把height: 50%;改大一些就好了，
不过即使取到100，上方好象还是有空间

svg里面的元素突破svg宽高的看不到，它们的位置不论放大缩小都会按比例在自己的位置上

马黑黑

花飞飞 发表于 2024-10-8 20:56
关键是路径的设计吧。

这个就很高级，波浪的形状是它决定的。。

对的，这是关键。路径的设计是一位国外大佬，任何人可以免费试用

马黑黑

花飞飞 发表于 2024-10-8 20:55
中午匆忙一看，完全没get到重点。还是得要沉下心来细读。。

理解自己尚未理解的东东需要过程和空间

红影

马黑黑 发表于 2024-10-8 21:58
css+svg还是很厉害的

是啊，简直出神入化了

红影

马黑黑 发表于 2024-10-8 22:00
这个还需要解说吗

那个路径看着有些复杂

红影

马黑黑 发表于 2024-10-8 22:02
曲线是path路径，cubic-bezie 是用在CSS里替代最常见的 linear；3s 转换我们也不是没用过

哦哦，原来它是用来决定动画在不同时间段的速度变化的。

小辣椒

哇塞，厉害，代码制作水浪效果

马黑黑

小辣椒 发表于 2024-10-9 11:48
哇塞，厉害，代码制作水浪效果

马黑黑

红影 发表于 2024-10-9 09:12
哦哦，原来它是用来决定动画在不同时间段的速度变化的。

这个知识点讲了不止一次了

马黑黑

红影 发表于 2024-10-9 09:10
那个路径看着有些复杂

你可以单独抽离路径瞧瞧