【问题标题】:How to create animated "wave" effect in vuejs?如何在 vuejs 中创建动画“波浪”效果?
【发布时间】:2020-10-01 13:56:16
【问题描述】:

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

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

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

【问题讨论】:

    标签: html css vue.js svg


    【解决方案1】:

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

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

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

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

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

    希望对你有帮助。

    【讨论】:

    • 哦,是的,与关键帧相结合的生成器正是我想要的,非常感谢
    • 完美。很高兴我能帮助你。祝你好运。
    猜你喜欢
    • 2020-08-11
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2017-12-10
    • 2017-10-06
    • 2021-03-07
    • 2017-08-09
    • 1970-01-01
    相关资源
    最近更新 更多