空心文字闪动--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
巴特西

空心文字闪动--css3

最新文章

热门文章
