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
  • 相关阅读:
    基于DPDK的高效包处理系统
    Docker在centos系统上的安装
    TCP三次握手
    service与kube-proxy
    路由策略和策略路由
    golang context 超时自动取消方法
    用Dockerfile构建镜像
    kubemark模拟k8s计算节点,测试k8s组件性能
    golang动画等待计算菲波那契结果
    golang实现的倒计时计数器
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/5749827.html
Copyright © 2011-2022 走看看