效果图
思路:用SVG描文字路径,animation来控制动画播放。
首先用矢量图形编辑器来把文字路径做好矢量图形编辑器安装包下载
打开编辑器输入文字 -
选择 路径
>对象转换成路径(快捷键:shift+Ctrl+C)保存为svg格式,用文字编辑器打卡(我用的是DW)
红框选中区是我们需要的文字路径
CSS
----------------------------------------------------------------------------------
#my-svg-text{position:
relative;width:
500px;height:
500px;margin:0 auto;}
#my-canvas
{ position:
relative;width:
500px;height: 500px;}
.title {stroke-dasharray: 2000;stroke-dashoffset: 2000;animation: draw 5s
linear forwards;}
@keyframes draw {
to {
stroke-dashoffset: 0;}
}
.title2 {
stroke-dasharray: 2000;stroke-dashoffset: 2000;animation: draw2 5s
linear 1.5s forwards;}
@keyframes draw2 {
to {
stroke-dashoffset: 0;}
}
--------------------------------------------------------------------------------------
tips:stroke-dasharray: 2000;
stroke-dashoffset: 2000; (2000没有特殊含义,比路径长度大即可,数字越大动画越快)animation(动画): draw(动画名称) 5s(播放时长) linear(延时) 0s(延时时长) forwards(播放完后停留在最后一帧);
html
-----------------------------------------------------------------------------
--------------------------------------------------------------------------------------
tips:
fill-opacity
= "填充透明度"
stroke = "路径颜色" (none表示没有颜色)
stroke-width = "路径粗细"
d = "文字的路径(上图红框截图部分)"
---------------------------------------------------------------------------------------