css3呼吸灯

<div class="breathe-btn"></div>

<style type="text/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));
		background-image: -moz-linear-gradient(#6cc3fe,#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;
		animation:ease-in-out breathe 2700ms infinite alternate; 
}
	@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);}
	}
@-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);}
}
</style>