码迷,mamicode.com
首页 > 其他好文 > 详细

文字动画和文字镂空

时间:2016-04-26 12:36:41      阅读:224      评论:0      收藏:0      [点我收藏+]

标签:

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

 

文字动画和文字镂空

标签:

原文地址:http://www.cnblogs.com/binmengxue/p/5434432.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!