CSS制作动态闪光文字

Bertha 。 2023-10-06 18:11 0阅读 0赞

![在这里插入图片描述][246abe45b6fb46358b976fa6eecb07ad.png]

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            text {
          
                font-size: 50px;
                stroke: red;
                stroke-width: 2;
                stroke-dasharray: 0;
            }
            .text1 {
          
                stroke: yellow;
                animation: text1 10s infinite;
            }
            .text2 {
          
                stroke: blue;
                animation: text2 10s infinite;
    
            }
            .text3 {
          
                stroke: #CD7F32 ;
                animation: text3 10s infinite;
    
            }
            @keyframes text1 {
          
                0%,100% {
          
                    stroke-dasharray: 20;
                }
                50% {
          
                    stroke-dasharray: 250;
                }
            }
            @keyframes text2 {
          
                0%,100% {
          
                    stroke-dasharray: 233;
                }
                50% {
          
                    stroke-dasharray: 20;
                }
            }
            @keyframes text3 {
          
                0%,100% {
          
                    stroke-dasharray: 188;
                }
                50% {
          
                    stroke-dasharray: 10;
                }
            }
        </style>
    </head>
    <body>
        <svg width="400" height="150">
            <g>
                <text x="160" y="75">我爱撸码</text>
                <text class="text1" x="160" y="75">我爱撸码</text>
                <text class="text2" x="160" y="75">我爱撸码</text>
                <text class="text3" x="160" y="75">我爱撸码</text>
            </g>
        </svg>
    </body>
    </html>

[246abe45b6fb46358b976fa6eecb07ad.png]: https://img-blog.csdnimg.cn/246abe45b6fb46358b976fa6eecb07ad.png