【特效库】svg进度条/过渡条

来源：互联网发布：科密考勤机数据库下载编辑：程序博客网时间：2024/06/05 00:17

<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title></head><body><svg id="js-times-svg" >  <defs>    <linearGradient id="color-gradient" x1="0" y1="0%" x2="99.33%" y2="0%" gradientUnits="userSpaceOnUse">      <stop offset="0%" style="stop-color:#62B220"></stop>      <stop offset="100%" style="stop-color:#f6250a"></stop>    </linearGradient>  </defs>  <line x1="0" y1="50" x2="100%" y2="50.001" stroke="#666" stroke-width="30" stroke-dasharray="5 5"></line>  <line id = "colorful" x1="0" y1="50" x2="99.33%" y2="50.001" stroke="url(#color-gradient)" stroke-width="30" stroke-dasharray="5 5" style="transition:all .5s ease;" class="prog"></line></svg><script type="text/javascript">var i = 0;var flag = 1;setInterval(function(){console.log(document.querySelector("#colorful").setAttribute("x2",i+"%"));if(flag==1){if(i==100){flag = 0;}i++;}else{if(i==0){flag = 1;}i--;}},50)</script></body></html>

阅读全文

0 0