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

发表于 | 更新于 | 阅读次数 1
实现放射圆提示用户去点击的效果

效果图如下：

html:

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

css:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
.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;
  }
}