直线向左逐渐消失动画

 

直线动画各有千秋

我想到的是用SVG+css3来实现

个人觉得比较简单

容易操作

Html代码：

<svg width="300" height="98" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
 <g>
  <title>Layer 1</title>
  <line id="svg_3" y2="48.5" x2="258.00235" y1="48.5" x1="45" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="2" stroke="#000000" fill="none"/>
 </g>
</svg>

CSS代码： 

#svg_3{
    stroke-dasharray:200;
    animation:disappear 5s infinite;
}
@keyframes disappear{
   to{
       stroke-dashoffset:200px
   }
}

同样也可以让曲线自己把自己画出来的

我们一样去实现它

首先还是用svg先自己画出一条任意曲线

HTML代码：

<svg width="581" height="98" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <path id="svg_1" stroke-dasharray="988.004, 988.004" stroke-dashoffset="0" fill="none" stroke-width="4.3" stroke="#000" 
d="m62.9,14.9c-25,-7.74 -56.6,4.8 -60.4,24.3c-3.73,19.6 21.6,35 39.6,37.6c42.8,6.2 72.9,-53.4 116,-58.9c65,-18.2 191,101 215,
28.8c5,-16.7 -7,-49.1 -34,-44c-34,11.5 -31,46.5 -14,69.3c9.38,12.6 24.2,20.6 39.8,22.9c91.4,9.05 102,-98.9 176,-86.7c18.8,
3.81 33,17.3 36.7,34.6c2.01,10.2 0.124,21.1 -5.18,30.1"/>
 </g>
</svg>

 css代码或者js都可以实现

js代码：

<script>
var path = document.querySelector("#svg_1");
var length = path.getTotalLength();
path.style.transition = path.style.WebkitTransition = 'none'; 
// 设置起始点
path.style.strokeDasharray = length ; 
path.style.strokeDashoffset = length; 
// 获取一个区域，获取相关的样式，让浏览器寻找一个起始点。
path.getBoundingClientRect(); 
// 定义动作
path.style.transition = path.style.WebkitTransition = 'stroke-dashoffset 2s ease-in-out'; 
// Go! 
path.style.strokeDashoffset = '0';
</script>

css:

#svg_1{
    stroke-dasharray:988;
    animation:dash 5s linear; 
}
@keyframes dash{
    to{
        stroke-dashoffset:1000;
}
}

转载于:https://www.cnblogs.com/wold/p/7711610.html