Skip to content

JIEJOE-WEB-Tutorial/016-wavy-lines

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

6 Commits
 
 
 
 
 
 
 
 

Repository files navigation

16 - SVG波纹线条效果

👆👆点击跳转: Bilibili📺教程视频链接


Describe📋️

当进入页面时,页面会生成横向排列的竖向SVG path线条,当使用鼠标在界面中移动时,鼠标会干扰周围的线条形成波纹排斥形状,并且、所有的线条都具有模拟物理效果,包括弹性,阻尼,缓动


Notice⚠️

  • 该效果取自Antoine Wodniack的CodePen,文件目录中已给出该效果的原压缩包
  • 简化后的内容去掉了原来的柏林噪声波动、有能力的小伙伴可以在原内容上继续研究带噪声影响的效果
  • 添加了噪声完整效果的具体落地展示、可以去查看Antoine Wodniack的个人网站