css流动线条（SVG+CSS动画实现动效（流光、呼吸等效果））

流光效果

绘制流光线条

创建SVG
  
  
  
  
  
  
  
  ，根据UI给的背景图 
  
  
  
  
  
  
  
，定位到图上每条管道（即流光线条的路径）的起始点以及拐点 


 


 


 


 


 


 


 

，绘制折线               。绘制折线的时候按照下图方框通过class分组
 
 
 
 
 
 
 
 ，这几组的光线流动是同时出发的  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 。

svg相关知识点：https://www.w3school.com.cn/svg/index.asp <svg width="100%" height="100%" class="added-wrap_svg" :class="{toPause: pause}"> // 线条光晕 <filter id="filter1" x="-120%" y="-120%" width="400%" height="400%"> <feOffset result="offOut" in="SourceGraphic" dx="0" dy="0"></feOffset> <feGaussianBlur result="blurOut" in="offOut" stdDeviation="6"></feGaussianBlur> <feBlend in="SourceGraphic" in2="blurOut" mode="multiply"></feBlend> </filter> // 绘制折线 <polyline class="cleanToMarket" points="1233,976 1239,983 1267,983"/> <polyline class="cleanToMarket" points="1233,992 1239,999 1274,999"/> <polyline class="cleanToMarket" points="1226,1010 1284,1010"/> <polyline class="cleanToMarket" points="1233,1028 1239,1022 1274,1022"/> <polyline class="cleanToMarket" points="1232,1045 1239,1039 1267,1039"/> </svg>

折线样式

polyline{ stroke: #E5DA40; fill: transparent; stroke-width: 2; stroke-linecap: round; animation: act 3s linear infinite; } 让光线动起来 上边画出来的是一整条长的实线  
   
   
   
   
   
   
   
，接下来我们会用到SVG的两个属性：stoke-dasharray和stroke-dashoffset















。

stoke-dasharray

：用于创建虚线
  
  
  
  
  
  
  
 。

stroke-dasharray = ‘10’

stroke-dasharray = ‘10, 5’

stroke-dasharray = ‘20, 10, 5’

stroke-dasharray为一个参数时： 其实是表示虚线长度和每段虚线之间的间距 

 

 

 

 

 

 

 
，

如：stroke-dasharray = ‘10’ 表示：虚线长10

 

 

 

 

 

 

 

 ，间距10               ，然后重复虚线长10 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，间距10

两个参数或者多个参数时：一个表示长度















，一个表示间距                       ，

如：stroke-dasharray = ‘10, 5’ 表示：虚线长10 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，间距5






















，然后重复虚线长10                ，间距5；

如：stroke-dasharray = ‘20, 10, 5’ 表示：虚线长20 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，间距10














，虚线长5
  
  
  
  
  
  
  
  ，接着是间距20 
  
  
  
  
  
  
  
，虚线10 


 


 


 


 


 


 


 

，间距5
 
 
 
 
 
 
 
 ，之后开始如此循环

stroke-dashoffset：这个属性是相对于起始点的偏移  
   
   
   
   
   
   
   
，正数偏移x值的时候 

 

 

 

 

 

 

 
，相当于往左移动了x个长度单位

 

 

 

 

 

 

 

 ，负数偏移x的时候               ，相当于往右移动了x个长度单位  
  
  
  
  
  
  
  。

感兴趣的可以参考https://www.cnblogs.com/daisygogogo/p/11044353.html

这里相当于一条管道上 
 

 
 

 
 

 
 

 
 

 
 

 
 

 
 
，只有一段虚线















，然后让这条虚线从左至右移动起来
 


 


 


 


 


 


 


 

。

首先获取到所有的折线 var char = http://www.w3.org/2000/svg var polylines = document.getElementsByTagNameNS(char, polyline)

每条折线                       ，获取到折线的长度 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
，设置虚线






















，如第一组                ，设置虚线长80 
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
，间距为该条折线的长度














，将偏移量设置为80px
  
  
  
  
  
  
  
  ，虚线就会往左移动80px 
  
  
  
  
  
  
  
，这样初始时相当于虚线隐藏了
 
 
 
 
 
 
 
。

然后 


 


 


 


 


 


 


 

，设置虚线移动动画
 
 
 
 
 
 
 
 ，即设置偏移量为折线的长度   
   
   
   
   
   
   
   。

这样  
   
   
   
   
   
   
   
，流光效果就出来了
 

 

 

 

 

 

 

 
。

polylines.forEach((i, index) => { // 获取折线长度 const len = i.getTotalLength() // 设置滤镜 i.style.filter = url(#filter1) // 设置虚线和间隔 i.style.strokeDasharray = 80, + len // 设置偏移量 i.style.strokeDashoffset = 80 // 设置动画名称 i.style.animationName = act + index var style = document.styleSheets[0] // 插入动画规则 style.insertRule(@Keyframes act + index + {100% {stroke-dashoffset: + (-(len)) + }}, 1) if (i.classList[0] === cleanToMarket) { i.style.strokeDasharray = 20, + len i.style.strokeDashoffset = 20 i.style.strokeWidth = 1 // 动画延迟 i.style.animationDelay = 3s } if (i.classList[0] === marketToEmpowerment) { i.style.strokeDasharray = 30, + len i.style.strokeDashoffset = 30 i.style.strokeWidth = 1 i.style.animationDelay = 6s } if (i.classList[0] === operatioCcenter) { i.style.animationDelay = 9s } if (i.classList[0] === empowermentToLib) { i.style.strokeDasharray = 60, + len i.style.strokeDashoffset = 60 i.style.strokeWidth = 1 i.style.animationDelay = 9s } if (i.classList[0] === libToEmpowerment) { i.style.strokeDasharray = 60, + len i.style.strokeDashoffset = 60 i.style.strokeWidth = 1 i.style.animationDelay = 12s } if (i.classList[0] === libToService) { i.style.animationDelay = 12s } if (i.classList[0] === serviceToApply) { i.style.animationDelay = 15s } })

上下浮动

@keyframes float{ 0%{transform:translateY(0)} 50%{transform:translateY(6px)} 100%{transform:translateY(0)} }

忽闪

@keyframes dataMarket { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; }}

发光

@keyframes showBlur{ 0% { filter: blur(0px); } 50% { filter: blur(50px); } 100% { filter: blur(0px); } }

动画暂停

animation-play-state: paused