SVG文字线条填色动画特效

ziblog

已于 2025-06-27 11:25:19 修改

阅读量278

点赞数 5

CC 4.0 BY-SA版权

文章标签：前端 javascript css

于 2025-06-16 15:43:01 首次发布

本文链接：https://blog.youkuaiyun.com/zichenblog/article/details/148693267

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SVG文字线条填色动画特效</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #121212;
margin: 0;
font-family: Arial, sans-serif;
overflow: hidden;
}

.container {
width: 100%;
max-width: 800px;
text-align: center;
}

.text-animation {
width: 100%;
height: auto;
}

.text-path {
fill: none;
stroke: #fff;
stroke-width: 2;
stroke-dasharray: 1000;
stroke-dashoffset: 1000;
animation: draw 4s ease-in-out forwards;
}

.text-fill {
fill: none;
stroke: none;
opacity: 0;
animation: fill 2s ease-in-out 3s forwards;
}

@keyframes draw {
to {
stroke-dashoffset: 0;
}
}

@keyframes fill {
to {
opacity: 1;
fill: url(#gradient);
}
}

/* 插入的链接样式 */
.custom-link {
position: fixed;
bottom: 20px;
right: 20px;
color: rgba(255,255,255,0.7);
text-decoration: none;
font-size: 14px;
background: rgba(0,0,0,0.3);
padding: 8px 15px;
border-radius: 20px;
transition: all 0.3s ease;
}

.custom-link:hover {
color: white;
background: rgba(0,0,0,0.5);
}
</style>
</head>
<body>
<div class="container">
<svg class="text-animation" viewBox="0 0 800 200">
<defs>
<linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" stop-color="#ff3366" />
<stop offset="25%" stop-color="#ff6633" />
<stop offset="50%" stop-color="#ffcc33" />
<stop offset="75%" stop-color="#33cc33" />
<stop offset="100%" stop-color="#3399ff" />
</linearGradient>
</defs>

<path class="text-path" d="M50,100 Q150,50 250,100 T450,100 T650,100" />
<path class="text-fill" d="M50,100 Q150,50 250,100 T450,100 T650,100" />

<path class="text-path" d="M50,150 Q150,200 250,150 T450,150 T650,150" />
<path class="text-fill" d="M50,150 Q150,200 250,150 T450,150 T650,150" />

<text x="400" y="80" text-anchor="middle" font-size="60" fill="none" stroke="#fff" stroke-width="2" stroke-dasharray="1000" stroke-dashoffset="1000" style="animation: draw 4s ease-in-out forwards;">
<tspan x="400" dy="0">SVG</tspan>
</text>

<text x="400" y="80" text-anchor="middle" font-size="60" fill="none" opacity="0" style="animation: fill 2s ease-in-out 3s forwards;">
<tspan x="400" dy="0" fill="url(#gradient)">SVG</tspan>
</text>
</svg>
</div>


</body>
</html>