先上效果
🌟SVG文字线条动画效果是一种引人入胜的视觉效果，能够将普通的文字转换为吸引人的动态艺术作品。本文将深入探讨如何使用SVG和CSS动画技术，为文字添加线条动画效果，从而提升网页的视觉吸引力和创意表达。
完整代码
HTML
<svg viewBox="0 0 400 200"> <text x="0" y="70%"> Hey </text> </svg>
CSS代码：
html, body { width: 100%; height: 100%; display: flex; font-family: "Bangers", cursive; background: #000; } svg { width: 600px; height: 300px; margin: auto; } svg text { text-transform: uppercase; animation: stroke 5s infinite alternate; letter-spacing: 10px; font-size: 150px; } @keyframes stroke { 0% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 0.8; } 50% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 1.2; } 70% { fill: rgba(72, 138, 20, 0); stroke: rgba(54, 95, 160, 1); stroke-width: 1.5; } 90%, 100% { fill: rgba(72, 138, 204, 1); stroke: rgba(54, 95, 160, 0); stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0; } }
🌟 关键技术点如下：
- SVG容器：
svg { width: 600px; height: 300px; margin: auto; }：设置了SVG元素的宽高和水平居中。
- 动画效果：
@keyframes stroke：定义了一个名为stroke的关键帧动画，用于文本的描边和填充效果。animation: stroke 5s infinite alternate;：应用了stroke动画，设置动画持续时间为5秒，无限循环，并交替反向播放。
- 动画关键帧：
0%到50%：文本的描边颜色和宽度逐渐变化，同时填充颜色保持透明。70%：描边宽度继续增加。90%到100%：文本的填充颜色逐渐显示，描边颜色逐渐消失，描边宽度和偏移量变化，实现一种“绘制”效果。
