css实现放射圆提示点击的效果

Date: 2017-04-03

效果图如下：

html:

<div class="shadow shadow1 cicle-ani1"></div>
<div class="shadow shadow2 cicle-ani2"></div>
<div class="shadow shadow3 cicle-ani3"></div>

css:

.cicle-ani1{
  animation: circleAni 3s linear 0s infinite;
}
.cicle-ani2{
  animation: circleAni 3s linear 1s infinite;
}
.cicle-ani3{
  animation: circleAni 3s linear 2s infinite;
}
@keyframes circleAni{
  0%{
    transform: scale(1);
    opacity: 1;
  }
  100%{
    transform: scale(1.6);
    opacity: 0;
  }
}