Effect (source code at the end):
achieve:
- Define the basic label, main is the bottom box, text is the text, see here for the usage of SVG tags :
<main>
<svg width="500" height="200">
<text x="30" y="120" class="txt">北极光之夜。</text>
</svg>
<main>
- Define the basic style of text label 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'; Song-like font
letter-spacing: 3px; word spacing
stroke: url("#yanse"); border color
stroke-width: 1.5px; border width
stroke-dasharray: 625; define dashed
stroke-dashoffset : 625; offset detailed usage can look at this
animation: draw 5s linear infinite; animation.
- Define animation:
@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;
}
}
The dynamic stroke effect is formed by changing the values of stroke-dasharray: x; and stroke-dashoffset: x;. For detailed usage, please see this
- Define the gradient color label and animation label of SVG ( see here for SVG label usage ):
<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> This is to define a gradient color.
Then define another animation in <stop> </stop> <animate> </animate> to control its color change.
Complete code:
<!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>
to sum up:
Other articles:
Colorful streamer text html+css
bubble floating background special effect html+css
simple clock special effect html+css+js
cyberpunk style button html+css
imitating NetEase cloud official website carousel image html+css+js
water wave loading animation html+ css
navigation bar scrolling gradient effect html+css+js
book page turning html+css
3D stereo album html+css
neon drawing board effect html+css+js
remember some CSS attribute summary (1)
Sass summary notes
... etc.