以下是 HTML5 SVG绘制轮廓线路径动画特效代码 的示例演示效果:
部分效果截图1:
部分效果截图2:
HTML代码(index.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG绘制轮廓线路径动画特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
body {
background: #673ab7;
}
svg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<article class="htmleaf-container">
<header class="htmleaf-header">
<h1>HTML5 SVG绘制轮廓线路径动画特效</h1>
<div class="htmleaf-demo center">
<a href="index.html" class="current">Default</a>
<a href="index2.html">Draw on scroll</a>
<a href="index3.html">Callback example</a>
<a href="index4.html">Animate mask path</a>
<a href="index5.html">Sample</a>
</div>
</header>
<div class="wrapper">
<svg viewBox="0 0 175 256" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="175" height="256">
<g stroke="#FFF" stroke-width="2" fill="none">
<path d="M157.068 33H165c4.77 0 9 4.464 9 9.706v202.758c0 5.243-4.288 9.536-9.524 9.536H10.524C5.288 255 1 250.707 1 245.464V42.707C1 37.464 5.06 33 10.017 33h9.203" />
<path d="M67 33V22.35c0-11.286 8.974-20.56 20.353-20.56 5.688 0 10.91 2.327 14.574 6.08C105.69 11.547 108 16.66 108 22.35V33" />
<path d="M103.302 33H157v45H19V33h52.72" />
<path d="M95.068 25.237c0 4.293-3.474 7.785-7.76 7.785-4.284 0-7.758-3.492-7.758-7.785 0-4.302 3.474-7.785 7.757-7.785 4.287 0 7.76 3.482 7.76 7.785z" />
<path d="M18.696 103h137.896v.17" />
<path d="M18.738 127h42.64v.308" />
<path d="M18.738 155h137.854v.068" />
<path d="M18.738 178h137.854v-.006" />
<path d="M18.696 227h137.868v-.21" />
</g>
</svg>
</div>
</article>
<script src='js/jquery-2.1.1.min.js'></script>
<script type="text/javascript" src="js/jquery.drawsvg.min.js"></script>
<script>
var $svg = $('svg').drawsvg();
$svg.drawsvg('animate');
</script>
</body>
</html>
HTML代码(index2.html):
<!doctype html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 SVG绘制轮廓线路径动画特效</title>
<link rel="stylesheet" type="text/css" href="css/default.css">
<style type="text/css">
body {
background: #00838f;
}
.wrapper {
height: 2000px;
}
svg {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
}
</style>
</head>
<body>
<article class="htmleaf-container">
<header class="htmleaf-header">
<h1>HTML5 SVG绘制轮廓线路径动画特效</h1>
<div class="htmleaf-demo center">
<a href="index.html">Default</a>
<a href="index2.html" class="current">Draw on scroll</a>
<a href="index3.html">Callback example</a>
<a href="index4.html">Animate mask path</a>
<a href="index5.html">Sample</a>
</div>
</header>
<div class="wrapper">
<svg viewBox="0 0 190 132" style="background-color:#ffffff00" xmlns="http://www.w3.org/2000/svg" width="190" height="132">
<g stroke="#FFF" stroke-width="2" fill="none">
<path d="M183.618.5c3.234 0 5.882 2.647 5.882 5.88v119.24c0 3.233-2.648 5.88-5.882 5.88H6.382C3.148 131.5.5 128.853.5 125.62V6.38C.5 3.147 3.148.5 6.382.5h177.236z" />
<path d="M184 1c0 .833-72.32 78.49-72.32 78.49-8.915 9.376-23.5 9.376-32.416-.007C79.264 79.483 5 1.03 5 1" />
<path d="M66.816 20.924c0 7.063-5.727 12.788-12.793 12.788-7.07 0-12.793-5.725-12.793-12.788 0-7.063 5.722-12.788 12.793-12.788 7.066 0 12.793 5.725 12.793 12.788z" />
<path d="M75.5 13.5h28" />
<path d="M82.5 21.5h33" />
<path d="M74.5 30.5h32" />
<path d="M2.5 129.5l55-55" />
<path d="M187.5 129.5l-55-55" />
</g>
</svg>
</div>
</article>
<script src='js/jquery-2.1.1.min.js'></script>
<script type="text/javascript" src="js/jquery.drawsvg.min.js"></script>
<script>
var $doc = $(document), $win = $(window), $svg = $('svg').drawsvg(), max = $doc.height() - $win.height();
$win.on('scroll', function () {
var p = $win.scrollTop() / max;
$svg.drawsvg('progress', p);
});
</script>
</body>
</html>
JS代码(jquery.drawsvg.min.js):
/*! jQuery DrawSVG v1.0.0 (2015-09-10) - git.io/vGFa5 - Copyright (c) 2015 Leonardo Santos - MIT License */
!function(t){
"use strict";
var a="drawsvg",e={
duration:1e3,stagger:200,easing:"swing",reverse:!1,callback:t.noop}
,n=function(){
var n=function(n,s){
var i=this,r=t.extend(e,s);
i.$elm=t(n),i.$elm.is("svg")&&(i.options=r,i.$paths=i.$elm.find("path"),i.totalDuration=r.duration+r.stagger*i.$paths.length,i.duration=r.duration/i.totalDuration,i.$paths.each(function(t,a){
var e=a.getTotalLength();
a.pathLen=e,a.delay=r.stagger*t/i.totalDuration,a.style.strokeDasharray=[e,e].join(" "),a.style.strokeDashoffset=e}
),i.$elm.attr("class",function(t,e){
return[e,a+"-initialized"].join(" ")}
))}
;
return n.prototype.getVal=function(a,e){
return 1-t.easing[e](a,a,0,1,1)}
,n.prototype.progress=function s(s){
var t=this,a=t.options,e=(t.$paths.length,t.duration);
a.stagger;
t.$paths.each(function(n,i){
var r=i.style;
if(1===s)r.strokeDashoffset=0;
else if(0===s)r.strokeDashoffset=i.pathLen+"px";
else if(s>=i.delay&&s<=e+i.delay){
var o=(s-i.delay)/e;
r.strokeDashoffset=t.getVal(o,a.easing)*i.pathLen*(a.reverse?-1:1)+"px"}
}
)}
,n.prototype.animate=function(){
var e=this;
e.$elm.attr("class",function(t,e){
return[e,a+"-animating"].join(" ")}
),t({
len:0}
).animate({
len:1}
,{
easing:"linear",duration:e.totalDuration,step:function(t,a){
e.progress.call(e,t/a.end)}
,complete:function(){
e.options.callback.call(this),e.$elm.attr("class",function(t,e){
return e.replace(a+"-animating","")}
)}
}
)}
,n}
();
t.fn[a]=function(e,s){
return this.each(function(){
var i=t.data(this,a);
i&&""+e===e&&i[e]?i[e](s):t.data(this,a,new n(this,e))}
)}
}
(jQuery);
CSS代码(default.css):
@import url(http://fonts.useso.com/css?family=Raleway:200,500,700,800);@font-face{font-family:'icomoon';src:url('../fonts/icomoon.eot?rretjt');src:url('../fonts/icomoon.eot?#iefixrretjt') format('embedded-opentype'),url('../fonts/icomoon.woff?rretjt') format('woff'),url('../fonts/icomoon.ttf?rretjt') format('truetype'),url('../fonts/icomoon.svg?rretjt#icomoon') format('svg');font-weight:normal;font-style:normal;}
[class^="icon-"],[class*=" icon-"]{font-family:'icomoon';speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;/* Better Font Rendering =========== */
-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;}
body,html{font-size:100%;padding:0;margin:0;}
/* Reset */
*,*:after,*:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
/* Clearfix hack by Nicolas Gallagher:http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,.clearfix:after{content:" ";display:table;}
.clearfix:after{clear:both;}
body{background:#f9f7f6;color:#404d5b;font-weight:500;font-size:1.05em;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
a{color:#2fa0ec;text-decoration:none;outline:none;}
a:hover,a:focus{color:#74777b;}
.htmleaf-container{margin:0 auto;text-align:center;overflow:hidden;}
.htmleaf-content{font-size:150%;padding:1em 0;}
.htmleaf-content h2{margin:0 0 2em;opacity:0.1;}
.htmleaf-content p{margin:1em 0;padding:5em 0 0 0;font-size:0.65em;}
.bgcolor-1{background:#f0efee;}
.bgcolor-2{background:#f9f9f9;}
.bgcolor-3{background:#e8e8e8;}
/*light grey*/
.bgcolor-4{background:#2f3238;color:#fff;}
/*Dark grey*/
.bgcolor-5{background:#df6659;color:#521e18;}
/*pink1*/
.bgcolor-6{background:#2fa8ec;}
/*sky blue*/
.bgcolor-7{background:#d0d6d6;}
/*White tea*/
.bgcolor-8{background:#3d4444;color:#fff;}
/*Dark grey2*/
.bgcolor-9{background:#ef3f52;color:#fff;}
/*pink2*/
.bgcolor-10{background:#64448f;color:#fff;}
/*Violet*/
.bgcolor-11{background:#3755ad;color:#fff;}
/*dark blue*/
.bgcolor-12{background:#3f51b5;color:#fff;}
/*light blue*/
/* Header */
.htmleaf-header{padding:1em 190px 1em;letter-spacing:-1px;text-align:center;}
.htmleaf-header h1{color:#fff;font-weight:600;font-size:2em;line-height:1;margin-bottom:0;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.htmleaf-header h1 span{font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;display:block;font-size:60%;font-weight:400;padding:0.8em 0 0.5em 0;color:#c3c8cd;}
/*nav*/
.htmleaf-demo a{color:#fff;text-decoration:none;}
.htmleaf-demo{width:100%;padding-bottom:1.2em;}
.htmleaf-demo a{display:inline-block;margin:0.5em;padding:0.6em 1em;border:3px solid #fff;font-weight:700;}
.htmleaf-demo a:hover{opacity:0.6;}
.htmleaf-demo a.current{background:#1d7db1;color:#fff;}
/* Top Navigation Style */
.htmleaf-links{position:relative;display:inline-block;white-space:nowrap;font-size:1.5em;text-align:center;}
.htmleaf-links::after{position:absolute;top:0;left:50%;margin-left:-1px;width:2px;height:100%;background:#dbdbdb;content:'';-webkit-transform:rotate3d(0,0,1,22.5deg);transform:rotate3d(0,0,1,22.5deg);}
.htmleaf-icon{display:inline-block;margin:0.5em;padding:0em 0;width:1.5em;text-decoration:none;color:#fff;}
.htmleaf-icon span{display:none;}
.htmleaf-icon:before{margin:0 5px;text-transform:none;font-weight:normal;font-style:normal;font-variant:normal;font-family:'icomoon';line-height:1;speak:none;-webkit-font-smoothing:antialiased;}
/* footer */
.htmleaf-footer{width:100%;padding-top:10px;}
.htmleaf-small{font-size:0.8em;}
.center{text-align:center;}
/****/
.related{position:absolute;top:100%;left:0;width:100%;color:#fff;background:#333;text-align:center;font-size:1.25em;padding:0.5em 0;overflow:hidden;}
.related > a{vertical-align:top;width:calc(100% - 20px);max-width:340px;display:inline-block;text-align:center;margin:20px 10px;padding:25px;font-family:"Segoe UI","Lucida Grande",Helvetica,Arial,"Microsoft YaHei",FreeSans,Arimo,"Droid Sans","wenquanyi micro hei","Hiragino Sans GB","Hiragino Sans GB W3","FontAwesome",sans-serif;}
.related a{display:inline-block;text-align:left;margin:20px auto;padding:10px 20px;opacity:0.8;-webkit-transition:opacity 0.3s;transition:opacity 0.3s;-webkit-backface-visibility:hidden;}
.related a:hover,.related a:active{opacity:1;}
.related a img{max-width:100%;opacity:0.8;border-radius:4px;}
.related a:hover img,.related a:active img{opacity:1;}
.related h3{font-family:"Microsoft YaHei",sans-serif;}
.related a h3{font-weight:300;margin-top:0.15em;color:#fff;}
/* icomoon */
.icon-htmleaf-home-outline:before{content:"\e5000";}
.icon-htmleaf-arrow-forward-outline:before{content:"\e5001";}
@media screen and (max-width:50em){.htmleaf-header{padding:3em 10% 4em;}
.htmleaf-header h1{font-size:2em;}
}
@media screen and (max-width:40em){.htmleaf-header h1{font-size:1.5em;}
}
@media screen and (max-width:30em){.htmleaf-header h1{font-size:1.2em;}
}
CSS代码(style.css):
.cf:before,.cf:after,.container:before,.container:after{content:" ";display:table;}
.clear,.cf:after,.container:after{clear:both;}
.cf,.container{zoom:1;}
body{font-size:100%;font-family:'Open Sans',sans-serif;color:#444;}
h1{font-size:2.25em;margin:2em 0;}
h2{font-size:1.88em;margin:2em 0;}
.container{max-width:960px;margin:auto;}
a{color:inherit;font:inherit;text-decoration:none;}
.btn{display:inline-block;vertical-align:top;zoom:1;*display:inline;padding:10px 20px;font-size:16px;border:1px solid #FFF;border-radius:4px;-webkit-transition:.2s;transition:.2s;}
.btn + .btn{margin-left:20px;}
.btn:hover{/* background:rgba(255,255,255,0.1);color:#FFF;*/
background:#FFF;border-color:#3f51b5;color:#3F51B5;}
/* Intro */
.intro{background:#3f51b5;text-align:center;width:100%;height:100vh;position:relative;}
.intro .icons-author{position:absolute;bottom:70px;right:10px;margin:0;color:rgba(255,255,255,0.5);font-size:12px;}
.intro .icons-author a:hover{color:#FFF;}
.intro .container{position:absolute;top:0;right:0;left:0;bottom:400px;}
.intro .overlay{width:100%;height:100%;position:relative;z-index:10;color:#FFF;display:table;}
.intro .overlay .inner{height:100%;display:table-cell;vertical-align:middle;}
.intro .items-wrapper{width:220px;height:220px;position:relative;margin:auto;}
.intro .overlay h1{margin:0;}
.intro .overlay p{margin:0 auto;max-width:560px;}
.intro .btn-group{margin-top:18px;font-size:0;}
.intro .btn-group .link{display:inline-block;vertical-align:top;zoom:1;*display:inline;font-size:14px;margin:20px 10px 0;opacity:0.6;}
.intro .btn-group .link:hover{opacity:1;}
.intro .item,.intro .item svg{position:absolute;top:0;left:0;right:0;bottom:0;}
.intro .item svg{visibility:hidden;}
.intro .item svg.drawsvg-initialized{visibility:visible;}
.intro .item{-webkit-transition:.6s;transition:.6s;opacity:0;-webkit-transform:translate3d(0,30px,0);-ms-transform:translate3d(0,30px,0);-o-transform:translate3d(0,30px,0);transform:translate3d(0,30px,0);}
@-webkit-keyframes comeIn{from{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}
to{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
@-o-keyframes comeIn{from{-o-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}
to{-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
}
@-moz-keyframes comeIn{from{transform:translate3d(0,-30px,0);}
to{transform:translate3d(0,0,0);}
}
@keyframes comeIn{from{transform:translate3d(0,-30px,0);}
to{transform:translate3d(0,0,0);}
}
.intro .item.active{opacity:1;-webkit-animation:comeIn .6s forwards;animation:comeIn .6s forwards;}
.intro .item svg{margin:auto;}
.social-buttons{list-style:none;margin:60px auto;text-align:center;padding:0;}
.social-buttons li{display:inline-block;vertical-align:top;zoom:1;*display:inline;margin:0 5px;/*width:90px;*/
}
.social-buttons a{color:#FFF;}
.fb-btn .fb_iframe_widget{font-size:0;}
.gh-btn iframe{border:0;overflow:hidden;vertical-align:top;}
/* Main content */
main a{color:#3f51b5;-webkit-transition:.2s;transition:.2s;}
main a:hover{color:#9fa8da;}
.anchor{position:relative;top:-60px;}
.steps,.steps li{list-style:none;}
.steps{padding:0;margin:2em 0;}
.steps li{margin:40px 0;}
.table-options{width:100%;margin-top:2em;table-layout:fixed;}
.table-options th{border-bottom:1px solid #F0F0F0;padding:0 0 20px;text-align:left;}
.table-options td{padding:20px 0;}
.table-options a{color:#3f51b5;}
.cp_embed_iframe{vertical-align:bottom;margin:0 0 40px;}
pre{padding:10px;background:#FEFEFE;border:1px solid #F0F0F0;color:#666;}
footer{color:#888;margin-top:2em;font-size:14px;}
footer a:hover{color:#444;}
footer .container{border-top:1px solid #F0F0F0;padding-top:10px;padding-bottom:10px;}
分享到QQ
分享到微博
微信扫一扫
