SOURCE

<div class="wrap">
  <div class="bln"></div>
</div>

*{margin: 0;padding: 0;}
html,body{width: 100%;height: 100%;}
.wrap{
  width: 160px;
  height: 160px;
  padding: 20px;
  overflow: hidden;
  position:absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: #555555;
}
.bln{
  width: 158px;
  height: 158px;
  border-radius: 50%;
  border: 1px solid rgba(73,86,216,0.5);
  cursor: pointer;
  box-shadow: 0 0 30px rgba(73,86,216,0.7),0 0 30px rgba(73,86,216,0.7) inset;
  animation: breath 3s ease-in-out 0s infinite alternate;
}
@keyframes breath{
  0% { opacity: 1; box-shadow:0 0 30px rgba(73,86,216,0.7),0 0 30px rgba(73,86,216,0.7) inset;}
  50%{ opacity: 0.6; border:1px solid #abcdef; box-shadow: 0 0 30px rgba(171,205,239,0.7),0 0 30px rgba(171,205,239,0.7) inset;}
    100% { opacity: 1; box-shadow:0 0 30px rgba(73,86,216,0.7),0 0 30px rgba(73,86,216,0.7) inset;}
}