css3呼吸灯效果

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

.breathe-btn,.breathe-btn1,.breathe-btn2{
 width:5px; height:5px;border:5px solid #fff;left: 140px;top: 42px;
 position:absolute; border-radius:50%; box-shadow:0 0 0px 2px #fff; overflow:hidden;
 background-color:#fff;
 -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-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 2700ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}


.breathe-btn1{
 width:7px; height:7px;border:5px solid #fff;left: 250px;top: 48px;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-name: breathe;
 -webkit-animation-duration: 2000ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;

 animation-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 2000ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}


.breathe-btn2{
 width:10px; height:10px;border:5px solid #fff;left: 350px;top: 40px;
 -webkit-animation-timing-function: ease-in-out;
 -webkit-animation-name: breathe;
 -webkit-animation-duration: 3000ms;
 -webkit-animation-iteration-count: infinite;
 -webkit-animation-direction: alternate;

 animation-timing-function: ease-in-out;
 animation-name: breathe;
 animation-duration: 3000ms;
 animation-iteration-count: infinite;
 animation-direction: alternate;
}

@-webkit-keyframes breathe {
 0% { box-shadow:0 1px 2px #fff;}
 100% { border:5px solid #fff; box-shadow:0 0 50px 20px #fff;}
}

@keyframes breathe {
 0% { box-shadow:0 1px 2px #fff;}
 100% { border:5px solid #fff; box-shadow:0 0 50px 20px #fff;}
}