HTML+CSS SVG霓虹灯效果_状态灯 css-优快云博客

本文链接：https://blog.youkuaiyun.com/WCvison/article/details/114679061

本文介绍了一种使用HTML和CSS结合SVG实现的文字霓虹灯效果。通过设置不同的颜色层和动画延迟，使得文字呈现出类似霓虹灯的闪烁效果。核心在于利用SVG的stroke-dasharray和stroke-dashoffset属性来控制文字边框的显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

HTML+CSS SVG霓虹灯效果

核心思想是一串文字由4层组成

核心思想是一串文字由4层组成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG霓虹字</title>
    <style>
.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 {
  to{
    stroke-dashoffset: -400;
  }
}
    </style>
</head>
<body>
    <svg width="100%" height="100">
        <text text-anchor="middle" x="50%" y="50%" class="text text-1">
            forever
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-2">
            forever
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-3">
            forever
        </text>
        <text text-anchor="middle" x="50%" y="50%" class="text text-4">
            forever
        </text>
    </svg>  
</body>
</html>