我试图像下面的图像做一个点爆炸的东西:

目前,我已经尝试使用伪元素,但是,我只能生成12点突发并且不能反映图像中显示的内容.
反正是否只用少量元素创建一个点爆发?
以下是我用来尝试此解决方案的代码:
div{
width:100px;
height:100px;
background:grey;
transform:rotate(45deg);
margin:50px;
}
div:after{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(135deg);
}
div:before{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(250deg);
}Run Code Online (Sandbox Code Playgroud)
<div></div>Run Code Online (Sandbox Code Playgroud)
有没有一种方法可以使波浪背景变成圆圈。
我可以轻松获得圆形,但不确定如何才能像给定图片中那样获得边框。
<div class="circle-wave">
</div>
.circle-wave {
cursor: pointer;
height: 50px;
width: 50px;
border-radius: 50%;
}
Run Code Online (Sandbox Code Playgroud)