zoukankan      html  css  js  c++  java
  • 空心文字闪动--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- 2px;
                text-stroke-color: red;
                text-stroke- 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
  • 相关阅读:
    手把手教你使用markdown
    spring WebSocket详解
    springmvc请求参数异常处理
    蓝桥杯java 算法提高 摆花
    蓝桥杯java 算法提高 扶老奶奶过街
    蓝桥杯java 算法训练 未名湖边的烦恼
    蓝桥杯java 算法训练 Torry的困惑(基本型)
    java算法 硬币
    java算法 牌型种数
    java算法 方格填数
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749827.html
Copyright © 2011-2022 走看看