svg文本描边动画彩色版
代码：
<style>
.svg {
border: 1px solid gray;
background: linear-gradient(45deg, tan, transparent, teal);
}
.text {
font: bold 160px monospace;
fill: none;
stroke-width: 6;
stroke-dasharray: 0 300;
stroke-dashoffset: 0;
filter: drop-shadow(0 0 6px #333);
}
.text:nth-child(3n + 1) {
stroke: red;
animation: stroke1 10s infinite alternate;
}
.text:nth-child(3n + 2) {
stroke: green;
animation: stroke2 10s infinite alternate;
}
.text:nth-child(3n + 3) {
stroke: blue;
animation: stroke3 10s infinite alternate;
}
@keyframes stroke1 {
to { stroke-dasharray: 80 160; stroke-dashoffset: 1000; }
}
@keyframes stroke2 {
to { stroke-dasharray: 80 160; stroke-dashoffset: 1080; }
}
@keyframes stroke3 {
to { stroke-dasharray: 80 160; stroke-dashoffset: 1160; }
}
</style>
<svg width="800" height="300" viewBox="0 0 800 300" class="svg">
<symbol id="hc">
<text text-anchor="middle" x="50%" y="50%" dy="60px">花潮论坛</text>
</symbol>
<use href="#hc" class="text"></use>
<use href="#hc" class="text"></use>
<use href="#hc" class="text"></use>
</svg>
效果：
前一篇: js+svg绘制多重动画六边形
下一篇: svg文本左右移动
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2024-9-26 11:18 发布: 这个更好看，看效果是红绿蓝为一组，由无到有，由点成线，碎点点自己组合起来的～这个动画才是真正的酷帅～还会反向运动，直至消失～循环往复，无穷无尽～
