<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    	<title>CSS3实现会呼吸的灯</title>
    	<style type="text/css">
    	body {
    		background: #333;
    	}
    
    	.box {
    		margin:200px auto;
    		width: 400px;
    		height: 400px;
    	}
    
    	.hx1 {
    		margin-left:50px;
    		float:left;
    		width: 60px;
    		height: 60px;
    		line-height: 40px;
    		border: 1px solid #7CFC00;
    		border-radius: 60px;
    		background-color: #7CFC00;
    		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    		animation: ease-in-out div 1000ms infinite alternate;
    		-webkit-animation: ease-in-out div1 1000ms infinite alternate;
    	}
    
    	@keyframes div1 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(124, 252, 0, 1);
    			box-shadow: 1px 1px 30px rgba(124, 252, 0, 1);
    		}
    	}
    
    	@-webkit-keyframes div1 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(124, 252, 0, 1);
    			box-shadow: 1px 1px 30px rgba(124, 252, 0, 1);
    		}
    	}
    
    
    	.hx2 {
    		margin-left:50px;
    		float:left;
    		width: 60px;
    		height: 60px;
    		line-height: 40px;
    		border: 1px solid #F00;
    		border-radius: 60px;
    		background-color: #F00;
    		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    		animation: ease-in-out div 1000ms infinite alternate;
    		-webkit-animation: ease-in-out div2 1000ms infinite alternate;
    
    
    	}
    
    	@keyframes div2 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(255, 0, 0, 1);
    			box-shadow: 1px 1px 30px rgba(255, 0, 0, 1);
    		}
    	}
    
    	@-webkit-keyframes div2 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(255, 0, 0, 1);
    			box-shadow: 1px 1px 30px rgba(255, 0, 0, 1);
    		}
    	}
    
    	.hx3 {
    		margin-left:50px;
    		float:left;
    		width: 60px;
    		height: 60px;
    		line-height: 40px;
    		border: 1px solid #FF0;
    		border-radius: 60px;
    		background-color: #FF0;
    		box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
    		animation: ease-in-out div 1000ms infinite alternate;
    		-webkit-animation: ease-in-out div3 1000ms infinite alternate;
    
    
    	}
    
    	@keyframes div3 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(255, 255, 0, 1);
    			box-shadow: 1px 1px 30px rgba(255, 255, 0, 1);
    		}
    	}
    
    	@-webkit-keyframes div3 {
    		0% {
    			opacity: 0.1;
    			box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
    		}
    		100% {
    			opacity: 1;
    			border: 1px solid rgba(255, 255, 0, 1);
    			box-shadow: 1px 1px 30px rgba(255, 255, 0, 1);
    		}
    	}
    	</style>
    </head>
    
    <body>
    	<div class="box">
    		 <div class="hx1"></div>
    		 <div class="hx2"></div>
    		 <div class="hx3"></div>
    	</div>
    </body>
    
    </html>