这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识,请参考阅读ESSENTIAL ICONS。
制作流程
先用一张gif图片来看看效果:
HTML5: 利用SVG线条动态绘制文字轮廓边框动画
制作SVG
1、首先你要下载和安装一款矢量图形编辑器,推荐使用Inkscape。
2、打开Inkscape,创建一个新的文档。在文档的左上角创建你的文字。
HTML5: 利用SVG线条动态绘制文字轮廓边框动画
3、使用选择工具选取你创建的文字。
4、在Path菜单中,选择Object –> Path。然后保存为SVG。
5、使用文本编辑器打开你刚才保存的SVG。将一些不需要的标签去掉,每个路径只保留path部分即可,见下图:
HTML5: 利用SVG线条动态绘制文字轮廓边框动画
CSS
1、创建一个div作为包裹容器包住SVG。给这个div一个id,然后添加下面的css代码:
#YOUR-SVG-CONTAINER { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
margin: 40vh auto 0 auto;
}
2、给你的SVG元素一个id,然后添加下面的CSS代码:
#svg-canvas { //ADJUST NAME TO MATCH YOUR ID
position: relative;
width: 360px; //ADJUST WIDTH TO MATCH WIDTH OF YOUR TEXT
height: 110px; //ADJUST HEIGHT TO MATCH HEIGHT OF YOUR TEXT
}
3、确保你的每个路径元素看起来像下面这样:
4、在你的样式表中添加下面的代码。下面的css代码将以线条绘制文字轮廓。关于下面代码的说明请点击这里。
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 5s linear forwards;
-webkit-animation: draw 8s linear forwards;
-moz-animation: draw 8s linear forwards;
-o-animation: draw 8s linear forwards;
font-weight: bold;
font-family: Amatic SC;
-inkscape-font-specification: Amatic SC Bold"
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
完整代码:
text svgbody {
background-color: #212A3F;
}
#svg-container {
position: relative;
width: 940px;
height: 110px;
margin: 40vh auto 0 auto;
}
#svg-canvas {
position: relative;
width: 940px;
height: 110px;
}
.title {
stroke-dasharray: 500;
stroke-dashoffset: 500;
animation: draw 5s linear forwards;
-webkit-animation: draw 5s linear forwards;
-moz-animation: draw 5s linear forwards;
-o-animation: draw 5s linear forwards;
font-style:normal;
font-variant:normal;
font-weight:normal;
font-stretch:semi-expanded;
font-size:69.40313721px;
font-family:Ravie;
-inkscape-font-specification:'Ravie Semi-Expanded'
}
@keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-moz-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
@-o-keyframes draw {
to {
stroke-dashoffset: 0;
}
}
d="m 58.963004,17.880108 q 0,2.270513 -5.21879,3.863261 -4.608802,1.423306 -9.759816,1.423306 -4.812132,0 -7.895963,-1.796077 -3.558266,-2.101072 -3.558266,-6.032109 0,-5.083237 11.725335,-5.083237 6.506544,0 10.742575,2.406065 3.964925,2.236625 3.964925,5.218791 z m 0.271106,48.053539 q -6.879315,-1.253865 -14.639724,-1.253865 -7.489303,0 -20.942939,2.473842 0.508324,-2.50773 1.152201,-5.828779 5.42212,-0.643877 7.048756,-2.575507 1.660524,-1.965518 2.778836,-7.252085 1.084424,-5.015462 1.084424,-9.793705 0,-5.083237 -4.303807,-5.083237 -1.35553,0 -2.575507,0.304994 -1.863854,