CSS3实现呼吸灯效果

html5 css3实现呼吸灯效果，CSS3实现呼吸灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style>
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: 0
}

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: 500px;
	height: 400px;
	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)
	}
}
 
</style>
</head>
<body >
	<div class="breathe-btn"></div> 
	

</html>