xiaopanzi
V2EX  ›  Nuxt.js

nuxt 官网首页的水波效果动画是如何实现的?

  •  
  •   xiaopanzi · Mar 28, 2024 · 4764 views
    This topic created in 786 days ago, the information mentioned may be changed or developed.

    前端小白,最近看到nuxt 官网首页的水波效果动画(可能用词不准确)不错,请问这是如何实现的?是否有组件可以直接用?

    4 replies    2024-03-28 16:41:02 +08:00
    nitmali
        1
    nitmali  
       Mar 28, 2024
    svg 动画
    ZnductR0MjHvjRQ3
        2
    ZnductR0MjHvjRQ3  
       Mar 28, 2024
    就那几条线? canvas 画画就好了
    linkopeneyes
        3
    linkopeneyes  
       Mar 28, 2024
    svg 路径画出来,然后用获取路径总长度用 stroke-dasharray 一秒一秒加到总长度就差不多这个效果了
    super996
        4
    super996  
       Mar 28, 2024
    开发者工具直接能看到
    svg ,然后有几个 linearGradient
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   2946 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 42ms · UTC 08:01 · PVG 16:01 · LAX 01:01 · JFK 04:01
    ♥ Do have faith in what you're doing.