示例代码
代码语言：javascript复制<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>主要是通过box-shadow合阴影结合css3动画关键帧@keyframes来实现
