这个波浪的做法也太细腻逼真了，如此美妙的动态效果竟然是纯代码模拟的，太美了{:4_199:}
cubic-bezier() css中的三次贝塞尔曲线，对这个还真不熟。这样四条交织起伏的曲线好美啊{:4_187:}
transform: translate3d(-90px,0,0);这个也不常见，结合下一句，就是X轴上的变化吧。
醉美水芙蓉 发表于 2024-10-8 21:23
欣赏黑黑老师代码波浪形高级特效！
{:4_190:}
css还没看懂呢，接下里的svg也挺难懂，还要调用前面的设置，然后有自己的路径，这个路径以及视窗还有use的设置都没看懂。等着看解说文档{:4_199:}
这个制作太美了，很赞{:4_199:}
红影 发表于 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，加上透明 度，所以感觉层次更加丰富
{:4_190:}
花飞飞 发表于 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还是很厉害的
是啊，简直出神入化了{:4_199:}
马黑黑 发表于 2024-10-8 22:00
这个还需要解说吗
那个路径看着有些复杂{:4_187:}
马黑黑 发表于 2024-10-8 22:02
曲线是path路径，cubic-bezie 是用在CSS里替代最常见的 linear；3s 转换我们也不是没用过
哦哦，原来它是用来决定动画在不同时间段的速度变化的。{:4_204:}
哇塞，厉害，代码制作水浪效果{:4_178:}
小辣椒 发表于 2024-10-9 11:48
哇塞，厉害，代码制作水浪效果
{:4_190:}
红影 发表于 2024-10-9 09:12
哦哦，原来它是用来决定动画在不同时间段的速度变化的。
这个知识点讲了不止一次了
红影 发表于 2024-10-9 09:10
那个路径看着有些复杂
你可以单独抽离路径瞧瞧