HTML+CSS SVG霓虹灯效果

最新推荐文章于 2023-01-03 15:06:13 发布

Cwiyc

最新推荐文章于 2023-01-03 15:06:13 发布

阅读量317

点赞数 1

分类专栏： HTML+CSS 文章标签： html5 css3

本文链接：https://blog.csdn.net/wcvison/article/details/114679061

版权

HTML+CSS 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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>

stroke-dasharray建议看这篇文章。

stroke-dashoffset看这篇。

这两篇搭配起来看会更好，但我估计也看不懂，可以多找找其他文献。

Cwiyc

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
1
评论
HTML+CSS SVG霓虹灯效果

HTML+CSS SVG霓虹灯效果核心思想是一串文字由4层组成stroke-dasharray建议看这篇[文章](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray)。stroke-dashoffset看[这篇](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dashoffset)。这两篇搭配起来看会更好，但我估计也看不懂，
复制链接

扫一扫