空心文字闪动--css3 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        *{margin:0 ;padding:0;}
        .con{margin:20px auto;width:500px;text-align:center}
        .con span{
           /* font-size:100px;
            -webkit-text-fill-color: white;
            -webkit-text-stroke-color: red;
            -webkit-text-stroke-width: 2px;
            text-stroke-color: red;
            text-stroke-width: 2px;*/
            -webkit-text-fill-color:#fff;
            -webkit-text-stroke: 1px #333;
            font-size:30px;
            font-family:"microsoft yahei";
            letter-spacing:20px;
        }
        span{
            -webkit-animation:anima 2s linear infinite;
        }
        @-webkit-keyframes anima{
            0%{-webkit-transform:translate(0,0);}
            20%{-webkit-transform:translate(0,-14px);}
            25%{-webkit-transform:translate(0,-15px);}
            30%{-webkit-transform:translate(0,-14px);}
            50%{-webkit-transform:translate(0,0px);}
            60%{-webkit-transform:translate(0,14px);}
            70%{-webkit-transform:translate(0,15px);}
            80%{-webkit-transform:translate(0,14px);}
            100%{-webkit-transform:translate(0,0);}
        }
        .span1{-webkit-animation-delay:0s;}
        .span2{-webkit-animation-delay:0.3s;}
        .span3{-webkit-animation-delay:0.6s;}
        .span4{-webkit-animation-delay:0.9s;}
    </style>
</head>
<body>
    <div class="con">
        <span class="span1">我</span>
        <span class="span2">是</span>
        <span class="span3">好</span>
        <span class="span4">人</span>
    </div>
</body>
</html>
html

 

posted @ 2016-08-08 16:19  dongxiaolei  阅读(861)  评论(0)    收藏  举报