如何在 vuejs 中创建动画“波浪”效果？

Posted 2023-02-22

【中文标题】如何在 vuejs 中创建动画“波浪”效果？

【英文标题】：How to create animated "wave" effect in vuejs?

【发布时间】：2020-10-01 13:56:16

【问题描述】：

这种效果的名称是什么？在标题上方什么是软盒？我的意思是波浪线，比如 here.

它也在标题上方Readymade Multi-use Landing Homepages here。不知道叫什么，找不到了。

如何制作这个动画效果（来自第二个链接）并像在那个页面上一样响应？任何人都可以帮忙吗？如果可能的话，理想的解决方案是 vuejs。

【参考方案1】：

您不一定需要Vue.js 甚至js 来实现这一目标。只需CSS 即可。

在第一个示例中，它似乎只是一个带有背景图片的:afterdiv 定位的图像（白色波浪）。它位于实际 div 的顶部，您可以为此使用 z-index。

第二个例子有点时髦。 SVG（白色波浪）被动画向左移动。所以它实际上可能与第一个示例中的图片相同，但您只需添加动画以将元素无限地向左移动。

看看here。我用SVG 创造了几乎相同的效果。

另外，看看here - 您可以轻松自定义自己的波形。

希望对你有帮助。

【讨论】：

哦，是的，与关键帧相结合的生成器正是我想要的，非常感谢

完美。很高兴我能帮助你。祝你好运。