# 纯css3实现元素定点圆环扩散动画
# 快速导航
# 示例效果
# 示例代码
<template>
<div class="example-circlekuosan">
<div class="circle-btn"></div>
</div>
</template>
<style scoped>
.example-circlekuosan {
display:flex;
justify-content:center;
}
.circle-btn {
width: 8px;
height: 8px;
overflow: hidden;
background-color: rgb(252,145,104);
border-radius: 100%;
box-shadow: 0 0 0 0 rgba(236, 169, 69, 0.7);
cursor: pointer;
animation: pulsedb 2.25s infinite cubic-bezier(0.36, 0, 0, 1);
}
@keyframes pulsedb {
0% {
box-shadow: 0 0 0 0 rgba(236, 169, 69, 0.7);
}
100% {
box-shadow: 0 0 0 15px rgba(236, 169, 69, 0);
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
