CSS3:
#g1 path {
stroke-dasharray: 1000;/*当线条很长很长的时候,这个值也要相应的的增大,否则会导致线条变成线段*/
stroke-dashoffset: 1000;/*当线条很长很长的时候,这个值也要相应的的增大,否则会导致线条变成线段*/
animation: dash 5s linear infinite;
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 0;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
属性说明:
stroke-dasharray 表示虚线描边。可选值为:none, dasharray, inherit. 其中,none表示不是虚线;为一个逗号或空格分隔的数值列表。表示各个虚线端的长度。可以是固定的长度值,也可以是百分比值;inherit表继承。
stroke-dashoffset 表示虚线的起始偏移。可选值为:percentage, length, inherit. 百分比值,长度值,继承。
@keyframes定义和用法
"通过 @keyframes 规则,您能够创建动画。"
创建动画的原理是,将一套 CSS 样式逐渐变化为另一套样式。
在动画过程中,您能够多次改变这套 CSS 样式。
以百分比来规定改变发生的时间,或者通过关键词 "from" 和 "to",等价于 0% 和 100%。
0% 是动画的开始时间,100% 动画的结束时间。
为了获得最佳的浏览器支持,您应该始终定义 0% 和 100% 选择器。
注释:请使用动画属性来控制动画的外观,同时将动画与选择器绑定。
----------------------------------------------
Firefox 支持替代的 @-moz-keyframes 规则。
Opera 支持替代的 @-o-keyframes 规则。
Safari 和 Chrome 支持替代的 @-webkit-keyframes 规则
SVG:
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
<g id="g1">
<path id="svg_1" class="path1" d="m55.5,78.45001c11,-9 65,-30 64.5,-30.45001c0.5,0.45001 69.5,-17.54999 78.5,28.45001c9,46 -42,121 -42.5,120.54999" stroke-width="1.5" stroke="red" fill="transparent"/>
</g>
</svg>
如果不用CS3,下面这种方法可以实现动画:
这种方法是单次循环,还不知道怎么实现多次循环,求指教。
<script>
var path = document.querySelector('path1');
var length = path.getTotalLength();
// Clear any previous transition
path.style.transition = path.style.WebkitTransition =
'none';
// Set up the starting positions
path.style.strokeDasharray = length + ' ' + length;
path.style.strokeDashoffset = length;
// Trigger a layout so styles are calculated & the browser
// picks up the starting position before animating
path.getBoundingClientRect();
// Define our transition
path.style.transition = path.style.WebkitTransition =
'stroke-dashoffset 3s ease-in-out ';
// Go!
path.style.strokeDashoffset = '0';
</script>
运行效果:
是一条重复出现的线条动画;