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
  • 相关阅读:
    Kafka Eagle安装
    CentOS下OpenJDK设置JAVA_HOME
    设计模式:解释器模式
    Typora主题推荐
    SpringMVC的<mvc:annotation-driven />
    SpringMVC的视图解析器
    数字化营销
    《计算广告》第二版思维导图
    舆情计算
    实时数仓
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749827.html
Copyright © 2011-2022 走看看