文字动画和文字镂空

2022-09-26 22:18 归属：前端资讯阅读( )

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
            body{
                background: #000000;
                font-family: "微软雅黑";
            }
            .masked{
                 background:url(img/paint.png);
                -webkit-text-fill-color:transparent;/*文字的填充颜色为透明的*/
                -webkit-background-clip:text;/*背景文本裁切*/
                -webkit-animation-name:masked-animation;
                -webkit-animation-duration:20s;
                -webkit-animation-iteration-count:infinite;
                -webkit-animation-timing-function:linear;
                color:#fff;
                font-size:40px;
            }
            @-webkit-keyframes masked-animation {
                0% {background-position:left bottom;}
                100% {background-position:right bottom;}
            }
            .maskedTwo{
                -webkit-text-fill-color: transparent;
                -webkit-text-stroke: 1px #fff;
                font-size:40px;
            }
        </style>
    </head>
    <body>
        <div class="masked">
            <h4>这是一段可选文字</h4>
        </div>
        <div class="maskedTwo">
            <h4>这是一段可选文字</h4>
        </div>
    </body>
</html>

- END -

本文地址：文字动画和文字镂空 - 赣州建站资讯网

标签：

声明：文字图片等素材除标明原创外均来源于网络，如有侵权，请及时告知我们，我们将在最短的时间内删除！

上一篇：渐变字（动画）
下一篇：让用户不能复制，选择