js+css動畫實現動態流水線條效果
阿新 • • 發佈：2019-01-08
需求讓實現每個模組之間的線動態流水化，用canvas肯定很複雜，所有用了比較投機的方法，css動畫加js控制
注：不會匯出gif，搞得效果這麼差。。。。
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script> <style type="text/css"> *{ padding:0;margin:0; } .container{ background:black; position:relative;border:1px solid #ddd; width:1000px;height:800px; } .sparkLine{ position: absolute;transform-origin:left top; } .sparkLine .sparkParticle{ width:1px;height:1px;float:left; color:white;background: white; box-shadow: 0 0 10px white; opacity: 0; } @keyframes fade { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; } } .sparkLine .sparkParticle { } </style> </head> <body> <div class="container"> <div class="sparkLine" style=""> <div class="sparkParticle"></div> </div> </div> <script type="text/javascript"> function createLine(num,color,width,height,speed,left,top,deg){ //粒子數（px），顏色，寬度，高度，速度，位置左，位置右，角度 var $sparkLine=$('<div class="sparkLine"></div>'); $sparkLine.css("top",top); $sparkLine.css("left",left); $sparkLine.css("height",height); $sparkLine.css("transform",' rotateZ('+deg+'deg)'); for(var i=0;i<num;i++){ var $sparkParticle=$('<div class="sparkParticle"></div>'); $sparkParticle.css("-webkit-animation","fade "+speed+"s "+i/100+"s infinite"); $sparkParticle.css("width",width); $sparkParticle.css("height",height); $sparkLine.append($sparkParticle) } $(".container").append($sparkLine) } //建立線 createLine(200,'white',2,2,1,20,20,30); createLine(200,'white',2,2,1,20,20,90); </script> </body> </html>