HTML5: 利用SVG动画动态绘制文字轮廓边框线条

最新推荐文章于 2024-05-20 15:56:58 发布

iteye_5904

最新推荐文章于 2024-05-20 15:56:58 发布

阅读量3.1k

点赞数

分类专栏： Div / Css / XML / HTML5 文章标签：前端 ViewUI

本文链接：https://blog.csdn.net/iteye_5904/article/details/82672259

版权

DEMO: 点击这里看效果

简要教程

这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术，它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识，请参考阅读ESSENTIAL ICONS。

制作流程

先用一张gif图片来看看效果：

制作SVG

1、首先你要下载和安装一款矢量图形编辑器，推荐使用Inkscape。

2、打开Inkscape，创建一个新的文档。在文档的左上角创建你的文字。

3、使用选择工具选取你创建的文字。

4、在Path菜单中，选择Object --> Path。然后保存为SVG。

5、使用文本编辑器打开你刚才保存的SVG。将一些不需要的标签去掉，每个路径只保留path部分即可，见下图：

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、确保你的每个路径元素看起来像下面这样：

<path class="title" fill-opacity="0" stroke="#000" stroke-width="1.5" d="" />

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;
    }
}

出处：http://www.htmleaf.com/html5/html5donghua/20141203663.html

DEMO: 点击这里看效果

完整代码：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>text svg</title>
	<style type="text/css">
		body {
			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;
			}
		}
	</style>
</head>
<body>

	<div id="svg-container">
		<svg id="svg-canvas">
			<path class="title" fill-opacity="0" stroke="#FFF" stroke-width="1.5"
			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.7425

最低0.47元/天解锁文章

iteye_5904

关注

0
点赞
踩
8

收藏

觉得还不错? 一键收藏
1
评论
HTML5: 利用SVG动画动态绘制文字轮廓边框线条

DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效。SVG路径动画在网页设计中是一项热门的技术，它允许我们绘制各种简单、精美的图标和文字。关于使用SVG制作图标方面的知识，请参考阅读ESSENTIAL ICONS。制作流程先用一张gif图片来看看效果：制作SVG1、首先你要下载和安装一款矢量图形编...
复制链接

扫一扫