zoukankan      html  css  js  c++  java
  • css3同心圆闪烁扩散效果

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Document</title>
    </head>
    <style type='text/css'>
    .circle{200px;height:200px;position:absolute;top:50%;left:50%;margin:-100px 0 0 -100px;}
    .circle1, .circle2, .circle3, .center{
    position:absolute;
    left:50%;
    top:50%;
    margin:-30px 0 0 -30px;
    60px;
    height:60px;
    border-radius:30px;
    background-color:#666666;
    }
    .center{
    position:absolute;
    left:50%;
    top:50%;
    margin:-35px 0 0 -35px;
    70px;
    height:70px;
    border-radius:35px;
    background:#111111;/
    text-align:center;
    line-height:70px;
    color:#EAEAEA;
    font-size:16px;
    font-family:'';
    }

    .circle1{
    -webkit-animation:circle 3s linear infinite;
    animation:circle 3s linear infinite;
    }

    .circle2{
    -webkit-animation:circle 3s linear 0.8s infinite;
    animation:circle 3s linear 0.8s infinite;
    }
    .circle3{
    -webkit-animation:circle 3s linear 1.6s infinite;/* Safari and Chrome */
    animation:circle 3s linear 1.6s infinite;
    }
    @-webkit-keyframes circle{ /* Safari and Chrome */
    from{
    opacity:1;
    -webkit-transform:scale(0);
    }
    to{
    opacity:0;
    -webkit-transform:scale(3);
    }
    }


    </style>
    </head>
    <body>
    <div class='circle'>
    <div class='circle1'>&nbsp;</div>
    <div class='circle2'>&nbsp;</div>
    <div class='circle3'>&nbsp;</div>
    <div class='center'></div>
    </div>



    </body>
    </html>

  • 相关阅读:
    根据字符串拆分字符串
    .NET WinForm读取扫描枪从COM口传过来的数据,显示在TextBox中,并做其他操作。
    《将博客搬至CSDN》
    mysql学习(二)DML
    mysql学习(一)DDL
    BigDecimal
    排序
    2017
    oracle的mapper小结
    数据结构查找
  • 原文地址:https://www.cnblogs.com/luckyuns/p/6349665.html
Copyright © 2011-2022 走看看