css 呼吸灯效果

/*resize*/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,input,textarea,p,th,td,menu {
    margin:0;
    padding:0;
}
body {
    font-size:12px;
    -webkit-text-size-adjust:none;
    font-family:Arial,Helvetica,sans-serif;
}
img {
    border:none;
}
ol,ul {
    list-style:none;
}
em {
    font-style:normal;
}
a {
    text-decoration:none;
}
.clearfix {
    #zoom:1;
}
.clearfix:after {
    content:' ';
    display:block;
    height:0;
    clear:both;
    color:#fff;
}
body {
    background:#333;
}
.breathe-btn {
    position:relative;
    width:100px;
    height:10px;
    margin:40px auto;
    line-height:40px;
    border:1px solid #2b92d4;
    border-radius:5px;
    color:#fff;
    font-size:20px;
    text-align:center;
    cursor:pointer;
    box-shadow:0 1px 2px rgba(0,0,0,.3);
    overflow:hidden;
    background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));
    -webkit-animation-timing-function:ease-in-out;
    -webkit-animation-name:breathe;
    -webkit-animation-duration:2700ms;
    -webkit-animation-iteration-count:infinite;
    -webkit-animation-direction:alternate;
}
@-webkit-keyframes breathe {
    0% {
    opacity:.2;
    box-shadow:0 1px 2px rgba(255,255,255,0.1);
}
100% {
    opacity:1;
    border:1px solid rgba(59,235,235,1);
    box-shadow:0 1px 30px rgba(59,255,255,1);
}
}

 

http://www.jq22.com/webqd1732