直线动画各有千秋
我想到的是用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;
}
}