效果图:
1.创建一个div
<div class="point1" @click="handlePoint(1)"></div>
2.设置样式
.point1{
width: 1rem;
height: 1rem;
background: #2ce92f;
position: absolute;
border-radius: 50%;
z-index: 999;
cursor: pointer;
}
3.设置伪元素样式
.point1::after {
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -2;
background-color: #2ce92f;
animation: dot-play 4s linear 400ms infinite;
}
.point1::before {
width: 100%;
height: 100%;
content: "";
border-radius: 50%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
background-color: #2ce92f;
animation: dot-play 4s linear 200ms infinite;
animation-delay: 2s; /* 延迟 2s */
}
4.设置动画效果
@keyframes dot-play {
from {
transform: scale(1);
opacity: 0.8;
}
to {
transform: scale(4);
opacity: 0.1;
}
}