SVG绘制文字特效 html+css

效果（源码在最后）：

实现：

定义基本标签，main是底层盒子，text是文本，SVG标签用法看这里：

<main><svg width="500" height="200"><text x="30" y="120" class="txt">北极光之夜。</text></svg><main>

定义文本标签text基本样式：

.txt{   font-family: 'fangsong';font-weight: 900;font-size: 80px;letter-spacing: 3px;fill: transparent;stroke: url("#yanse"); stroke-width: 1.5px;stroke-dasharray: 625;stroke-dashoffset: 625;animation: draw 5s linear infinite;}

font-family: ‘fangsong’; 仿宋字体
letter-spacing: 3px;字间距
stroke: url("#yanse"); 边框颜色
stroke-width: 1.5px; 边框宽度
stroke-dasharray: 625; 定义虚线
stroke-dashoffset: 625; 偏移详细用法可以看这个
animation: draw 5s linear infinite; 动画。

定义动画：

@keyframes draw{0%,5%{stroke-dasharray: 625;stroke-dashoffset: 625;}40%,60%{stroke-dasharray: 625;stroke-dashoffset: 0;}100%{stroke-dasharray: 625;stroke-dashoffset: 625;}}

就是通过stroke-dasharray: x;与 stroke-dashoffset: x; 值的变化形成动态描边效果。详细用法可以看这个

定义SVG的渐变颜色标签与动画标签（SVG标签用法看这里）：

 <main><svg width="500" height="200"><defs><linearGradient id="yanse"><stop offset="33%" stop-color="#00BFFF"><animate attributeName="stop-color"from="#00BFFF" to="#FF8C00" dur="5s" repeatCount="indefinite"></animate></stop><stop offset="66%" stop-color="#00FFFF"></stop><stop offset="100%" stop-color="#00FA9A"><animate attributeName="stop-color"from="#00FA9AF" to="#FF00FF" dur="5s" repeatCount="indefinite"></animate></stop></linearGradient></defs><text x="30" y="120" class="txt">北极光之夜。</text></svg></main>

< linearGradient >< stop > …< /stop >< /linearGradient> 这个是定义一种渐变颜色。
然后在< stop >< /stop >里再定义一个动画< animate >< /animate >控制其颜色变化。

完整代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>北极光之夜</title><style>*{margin: 0;padding: 0;box-sizing: border-box;}main{height: 100vh;display: flex;justify-content: center;align-items: center;background-color: rgb(30, 49, 71);}.txt{   font-family: 'fangsong';font-weight: 900;font-size: 80px;letter-spacing: 3px;fill: transparent;stroke: url("#yanse"); stroke-width: 1.5px;stroke-dasharray: 625;stroke-dashoffset: 625;animation: draw 5s linear infinite;}@keyframes draw{0%,5%{stroke-dasharray: 625;stroke-dashoffset: 625;}40%,60%{stroke-dasharray: 625;stroke-dashoffset: 0;}100%{stroke-dasharray: 625;stroke-dashoffset: 625;}}</style>
</head><body><main><svg width="500" height="200"><defs><linearGradient id="yanse"><stop offset="33%" stop-color="#00BFFF"><animate attributeName="stop-color"from="#00BFFF" to="#FF8C00" dur="5s" repeatCount="indefinite"></animate></stop><stop offset="66%" stop-color="#00FFFF"></stop><stop offset="100%" stop-color="#00FA9A"><animate attributeName="stop-color"from="#00FA9AF" to="#FF00FF" dur="5s" repeatCount="indefinite"></animate></stop></linearGradient></defs><text x="30" y="120" class="txt">北极光之夜。</text></svg></main>
</body>
</html>

总结：

其它文章：
炫彩流光文字 html+css
气泡浮动背景特效 html+css
简约时钟特效 html+css+js
赛博朋克风格按钮 html+css
仿网易云官网轮播图 html+css+js
水波加载动画 html+css
导航栏滚动渐变效果 html+css+js
书本翻页 html+css
3D立体相册 html+css
霓虹灯绘画板效果 html+css+js
记一些css属性总结（一）
Sass总结笔记
…等