我的这个svg圈了半圈。我想围绕此形状创建脉冲光动画。
我已经弄乱了CSS和Webkit,但我得到的最接近的是父元素周围的脉冲光,而不是实际形状周围的脉冲光。非常感谢您对此有一些见识和想法。
SVG:
<svg class="pulse-button" width="234" height="256" xmlns="http://www.w3.org/2000/svg">
<g class="half-circle">>
<rect class="rect" x="-1" y="-1" width="236" height="258" id="canvas_background" fill="none"/>
<path transform="rotate(-90.53539276123047 116.5,117.59869384765625) " id="svg_6" d="m66,24.098694c55.8011,0 101,41.84254 101,93.5c0,51.65746 -45.1989,93.5 -101,93.5l0,-187z" stroke-linecap="null" stroke-linejoin="null" stroke-width="4" stroke="#000000" fill="#000000"/>
</g>
</svg>
答案 0 :(得分:1)
您可以尝试使用纯CSS解决方案:
.pulse {
width:200px;
height:100px;
position:relative;
margin:10px;
}
.pulse::before,
.pulse::after{
content:"";
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
border-radius:100px 100px 0 0;
background:#000;
}
.pulse::before {
background:yellow;
transform:scale(0.8);
animation: change 0.8s infinite alternate;
filter:blur(10px);
}
@keyframes change {
to {
transform:scale(1.1);
}
}
<div class="pulse">
</div>