svg文字霓虹灯效果

最新推荐文章于 2023-07-14 18:50:23 发布

青云码上

最新推荐文章于 2023-07-14 18:50:23 发布

阅读量222

点赞数 1

文章标签： class svg java

本文链接：https://blog.csdn.net/qq_21363577/article/details/109397495

版权

<svg width="100%" height="100">
    <text text-anchor="middle" x="50%" y="50%" class="text text-1">
        你好，打工人
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-2">
        你好，打工人
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-3">
        你好，打工人
    </text>
    <text text-anchor="middle" x="50%" y="50%" class="text text-4">
        你好，打工人
    </text>
</svg>

.text{
    font-size: 64px;
    font-weight: bold;
    text-transform: uppercase;
    fill: none;
    stroke-width: 2px;
    stroke-dasharray: 90 310;
    animation: stroke 6s infinite linear;
}
.text-1{
    stroke: #3498db;
    text-shadow: 0 0 5px #3498db;
    animation-delay: -1.5s;
}
.text-2{
    stroke: #f39c12;
    text-shadow: 0 0 5px #f39c12;
    animation-delay: -3s;
}
.text-3{
    stroke: #e74c3c;
    text-shadow: 0 0 5px #e74c3c;
    animation-delay: -4.5s;
}
.text-4{
    stroke: #9b59b6;
    text-shadow: 0 0 5px #9b59b6;
    animation-delay: -6s;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: -400;
  }
}