SVG波浪线（SVG wavy lines）

  • 示例
  • HTML
  • CSS
  • JS

更多有趣示例 尽在知屋安砖社区

示例

HTML

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 900" fill="none"><path class="line line3" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/><path class="line line2" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/><path class="line line1" d="M-10,348c15,17,24,43,68,47s97-43,183-12s165,73,283,49 s290-98,472-87c131.22,7.93,225.6,51.07,304,38"/><path class="line line3" d="M-10,319c28-9,68.84,25.02,116,26c48,1,83.41-12.8,124-7 c42,6,84,45,161,59s144,12,263-36s234-86,371-62s216,52,279,62"/><path class="line line2" d="M-10,319c28-9,68.84,25.02,116,26c48,1,83.41-12.8,124-7 c42,6,84,45,161,59s144,12,263-36s234-86,371-62s216,52,279,62"/><path class="line line1" d="M-10,319c28-9,68.84,25.02,116,26c48,1,83.41-12.8,124-7 c42,6,84,45,161,59s144,12,263-36s234-86,371-62s216,52,279,62"/><path class="line line3" d="M-10,296c27-13,59-22,107,0c71.61,32.82,113,14,175,22 s117,50,223,45s165-45,277-73s210-56,532,43"/><path class="line line2" d="M-10,296c27-13,59-22,107,0c71.61,32.82,113,14,175,22 s117,50,223,45s165-45,277-73s210-56,532,43"/><path class="line line1" d="M-10,296c27-13,59-22,107,0c71.61,32.82,113,14,175,22 s117,50,223,45s165-45,277-73s210-56,532,43"/><path class="line line3" d="M-10,263c15-6,85-39,117-13c52.68,42.81,124,38,182,35 s123,63,275,32s235-75,349-72s242,13,391,64"/><path class="line line2" d="M-10,263c15-6,85-39,117-13c52.68,42.81,124,38,182,35 s123,63,275,32s235-75,349-72s242,13,391,64"/><path class="line line1" d="M-10,263c15-6,85-39,117-13c52.68,42.81,124,38,182,35 s123,63,275,32s235-75,349-72s242,13,391,64"/><path class="line line3" d="M-10,225c0,0,39-33,79-38s61,24,100,44s101-7,159,19 s81,48,221,37s245-55,311-68s160-16,240-1s137,39,208,55"/><path class="line line2" d="M-10,225c0,0,39-33,79-38s61,24,100,44s101-7,159,19 s81,48,221,37s245-55,311-68s160-16,240-1s137,39,208,55"/><path class="line line1" d="M-10,225c0,0,39-33,79-38s61,24,100,44s101-7,159,19 s81,48,221,37s245-55,311-68s160-16,240-1s137,39,208,55"/><path class="line line3" d="M-10,192c0,0,51-54,91-59s60,8,99,28s83,24,141,50 s152,48,292,37s203-51,269-64s142-15,222,0s136,37,207,53"/><path class="line line2" d="M-10,192c0,0,51-54,91-59s60,8,99,28s83,24,141,50 s152,48,292,37s203-51,269-64s142-15,222,0s136,37,207,53"/><path class="line line1" d="M-10,192c0,0,51-54,91-59s60,8,99,28s83,24,141,50 s152,48,292,37s203-51,269-64s142-15,222,0s136,37,207,53"/><path class="line line3" d="M-10,144c0,0,54-39,94-44s85,7,124,27s59,25,117,51 s153,52,293,41s188-53,254-66s148-13,228,2s181,38,211,38"/><path class="line line2" d="M-10,144c0,0,54-39,94-44s85,7,124,27s59,25,117,51 s153,52,293,41s188-53,254-66s148-13,228,2s181,38,211,38"/><path class="line line1" d="M-10,144c0,0,54-39,94-44s85,7,124,27s59,25,117,51 s153,52,293,41s188-53,254-66s148-13,228,2s181,38,211,38"/><path class="line line3" d="M-10,115c0,0,66-50,145-47s176.71,58.34,234,75 c86,25,187,47,352,7s150.3-93.53,404-31c142,35,190,26,190,26"/><path class="line line2" d="M-10,115c0,0,66-50,145-47s176.71,58.34,234,75 c86,25,187,47,352,7s150.3-93.53,404-31c142,35,190,26,190,26"/><path class="line line1" d="M-10,115c0,0,66-50,145-47s176.71,58.34,234,75 c86,25,187,47,352,7s150.3-93.53,404-31c142,35,190,26,190,26"/><path class="line line3" d="M-10,88c0,0,100-71,231-36s199,100,373,85s187-94,320-94 s301,87,418,60"/><path class="line line2" d="M-10,88c0,0,100-71,231-36s199,100,373,85s187-94,320-94 s301,87,418,60"/><path class="line line1" d="M-10,88c0,0,100-71,231-36s199,100,373,85s187-94,320-94 s301,87,418,60"/></svg>

CSS

html, body {width:100%;height:100%;overflow:hidden;background:#000;
}@media only screen and (max-width: 1200px) {svg { height:900px; }
}

JS

let i = 0;gsap.set('.line',  {attr:{'stroke':'hsl(1,100%, 50%)', 'stroke-width':4, 'stroke-linecap':'round'}});
gsap.set('.line2', {attr:{'stroke-width':6}, opacity:0.4});
gsap.set('.line3', {attr:{'stroke-width':9}, opacity:0.15});[].forEach.call(document.getElementsByClassName('line'), (el) => {gsap.timeline({defaults:{duration:1}, repeat:-1, repeatDelay:(27-i)/50}).to(el, {duration:2, attr:{'stroke':'hsl(360, 100%, 50%)', ease:'power2.inOut'}}, 0).fromTo(el, {drawSVG:0}, {drawSVG:'35% 70%', ease:'sine.in'}, i/50).to(el, {drawSVG:'100% 100%', ease:'sine.out'}, 1+i/50).progress(i/20)i++;
});

SVG波浪线（SVG wavy lines）相关推荐

  1. html表格边框设置波浪线,SVG CSS3 按钮悬停边线环绕+波浪线+选择框动效

    CSS 语言: CSSSCSS 确定 @import url(http://fonts.googleapis.com/css?family=Open+Sans); *, *::before, *::a ...

  2. html svg波浪,CSS3+SVG 实现波浪滚动效果

    CSS3+SVG 实现波浪滚动效果 实现代码如下focus__a和focus__b是绝对定位,focus__b在focus__a之上 以下是HTML代码 以下是样式和CSS3动画代码 .focus__ ...

  3. 纯css3 svg 波浪底纹

    搞一个 css3 svg波浪底纹 svg外层的div(即容器壳不能丢掉position:relative;) 底纹的高度可根据自己需要修改.waves中的height <!DOCTYPE htm ...

  4. CSS3 SVG波浪线条动画js特效

    下载地址 CSS3 SVG波浪线条动画特效是一款简单的线条波浪滚动,线条弯曲动画特效. dd:

  5. 基于vue的svg画线_基于SVG的Vue图组件库

    基于vue的svg画线 图表 (diagram-vue) A vue component library of diagrams. Vue组件图库. View Demo 查看演示 Download S ...

  6. CSS：文字下波浪线动画效果

    之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现 就是使用径 ...

  7. HTML怎么在字体下方加波浪线,CSS实现文字下面波浪线动画效果

    by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8607 本文可全文转载,个人网站无需授权,但需要保留原作者.出处以及文中链接,任 ...

  8. html怎么在字体中加波浪线,强大的CSS：文字下波浪线动画效果

    之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现 就是使用径 ...

  9. web前端入门到实战：CSS文字下波浪线动画效果

    之前有至少5个人在评论中询问我文章中链接hover时候波浪下划线动画是怎么实现的,类似下图gif示意: 这里就介绍下是如何实现的. 有两种实现方法,各有优劣. 一.使用径向渐变纯CSS实现 就是使用径 ...

最新文章

  1. 【Django】入门篇：项目创建（pycharm、linux）
  2. Mac OS X上的Java Memcached
  3. 爬虫教程（ 2 ） --- 爬虫框架 Scrapy、Scrapy 实战
  4. css设置按钮竖直方向居中_前端设计师必须知道的10个重要的CSS技巧
  5. macos 开发环境配置
  6. Linux wifi优先级高于ethernet
  7. II.MongoDB CRUD Operations(CRUD操作)
  8. 天涯明月刀开发_天涯明月刀手游公测上线，斗鱼暗地操作，打造第二个PDD
  9. Linux_数据段、代码段、堆栈段、BSS段的区别
  10. 基于遗传算法车辆路径问题（VRP）
  11. 选择单页设计的理由是什么？
  12. ICM TSCC视频格式的播放
  13. 员工拿计件工资，一旦工资挣高了，老板就调低工价，这样的老板你遇到过吗，怎么应对？
  14. C语言中取余与取模的区别
  15. 剑指台积电！英特尔砸200亿美元建厂进军芯片代工
  16. C语言 system函数
  17. 三维图形的平移，旋转与错切
  18. 计算机电源输出电压 电流,开关电源的输出电流如何决定_跟什么有关？
  19. USB Mass Storage 6.7 The Thirteen Cases章节的理解
  20. 2012年3月19日

热门文章

  1. axios请求失败、请求超时重新发送请求
  2. ris远程安装操作系统
  3. 论文笔记：DuLa-Net(CVPR 2019)
  4. 域渗透PTT票据传递攻击(Pass the Ticket)
  5. FORTRAN+计算物理学学习日记（2）
  6. php电脑版是什么意思,网络上pc是什么意思
  7. 简单通讯录c语言程序注释,Objective-C简易通讯录的实现
  8. 微软副总裁张亚勤:我不认为微软是美国公司
  9. 手游破解手段介绍及易盾保护方案
  10. 儿童摄影欧美浓郁温暖效果步骤