您好,我正在尝试仅使用纯 CSS3 在圆圈上实现“脉冲”效果。以下是预期的示例。 这是可能的?
预期的
当前的
#circle {
width: 70px;
height: 70px;
background: green ;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
position: absolute;
}
#icono{
width: 42px;
height: 42px;
margin-top: 12px;
margin-left: 14.5px;
}
<div id="circle" class="button">
<img id="icono" src="https://d30y9cdsu7xlg0.cloudfront.net/png/10685-200.png">
</div>
您可以通过创建伪元素
:before
并将:after
相同的动画应用到它们上并延迟来实现该效果。这个想法是他们有一个可以改变颜色和大小的边框。像这样的东西: