效果（源码在最后）：
实现：
- 定义基本标签，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总结笔记
…等