您的位置：首页 > 其它

SVG实现描边动画

2016-06-06 19:14 267 查看

说起SVG，我是恨它又爱它，恨它是因为刚开始接触的时候自己傻B地想用代码去写它，其实在web上我们用它做交互也只是用了几个常用的特性而已，其他的标签知道这么一回事就成了，其实说白了它就是一种图片格式，你得去画它，网站上最长用的SVG交互效果就是描边动画了，今天就来实现它

先上效果图：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>super</title>
<script src="vivus.js"></script>
<style>
.super_logo{
position: absolute;
}
#super{
position: absolute;
z-index: 1;
}
</style>
</head>
<body style="background:#0f1a3a;">
<img src="super.gif" alt="super" class="super_logo">
<svg id="super" x="0px" y="0px" width="293px" height="200px" viewBox="0 0 293 200">
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M67.667,39.667c0,0-33.334,17.333-46.667,36.667
c0,0,33.007,40.458,43.331,50.018c19.419,17.982,65.002,55.316,82.169,59.982c0,0,27.834-11.334,49.834-30.667S249,113,261,100
s9.334-12.333,15.334-22.333c0,0-21.333-29.333-44-38c0,0-162.001-5.334-163.334-2.667"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M169.667,50.333c0,0-71.334-2.667-74.667,8.667s42,14,42,14
s55.333,4.667,60,6.667s32.668,7.254,43.334,31.627L255,93.667C255,93.667,217,59,169.667,50.333z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M75.667,123c0,0,42,8,78,8.667s32.667,10.667,32.667,10.667
S185.333,155,146.5,153.667S75.667,123,75.667,123z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M45,93c0,0-12.667-24,34-48h-8.667c0,0-35.455,24.559-36,35.677L45,93
z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M174.912,161c0,0-24.745,12.999-24.745,12.333
s-15.25-4.249-20.583-10.416"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M130,162.667c0,0,1.75-3.083,13.667-1.25c0,0,30,0.836,30.75-0.582"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M177.75,43L224,45.5c0,0,7.5,12.125-13,8.625S177.75,43,177.75,43z"/>
<path fill="none" data-duration="60" stroke="#ffffff" stroke-width="1" d="M237.25,52c0,0,2.75,20.375,21.875,35.625l5.75-6.948
C264.875,80.677,249.273,55.266,237.25,52z"/>
</svg>
<script>
window.onload=function(){
var toPlay= new Vivus('super', {
type: 'delayed',
duration: 50,
start: 'autostart',
forceRender: false,
dashGap: 20}
);
var oSuper=document.getElementById('super');
oSuper.addEventListener('click',function(){
toPlay.reset().play();
});
};
</script>
</body>
</html>

View Code
以上~~如果大家觉得有意思，点个赞呗，关注下也就更好了

他们吃饭都回来了，我也终于要走了，实习狗下班

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航