CSS制作动态闪光文字

Posted 2021-07-04 willem_chen

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS制作动态闪光文字相关的知识，希望对你有一定的参考价值。

在这里插入图片描述

<!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>

以上是关于CSS制作动态闪光文字的主要内容，如果未能解决你的问题，请参考以下文章