波纹文字效果

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            @-webkit-keyframes masked-animation {
                0% {
                    background-position: 0 0
                }
                to {
                    background-position: -100% 0
                }
            }
           
            p {
                margin: 200px auto;
                width: 400px;
                height: 100px;
                line-height: 100px;
                text-align: center;
                color: hsla(0, 0%, 100%, .65);
                font-weight: 800;
                font-size: 52px;
                background-image: -webkit-linear-gradient(left, #cddc39, #ff9800 25%, #cddc39 50%, #ff9800 75%, #cddc39);
                -webkit-text-fill-color: transparent;
                -webkit-background-clip: text;
                -webkit-background-size: 200% 100%;
                -webkit-animation: masked-animation 2s infinite linear;
            }
           
            p:hover {
                -webkit-animation: masked-animation 0.5s infinite linear;
            }
        </style>
    </head>
    <body>
        <p>鸿蒙</p>
    </body>
</html>
posted @ 2021-11-29 16:05  诡道也  阅读(26)  评论(0)  编辑  收藏  举报