我正在尝试将以下动画应用于 svg 圆形元素:
$color: #65ff78;
html, body {
width: 100%;
height: 100%;
}
body {
background-color: #4e4e4e;
display: flex;
align-items: center;
justify-content: center;
}
.circle-ripple {
background-color: #35ffc3;
width: 1em;
height: 1em;
border-radius: 50%;
animation: ripple 0.7s linear infinite;
}
@keyframes ripple {
0% {
box-shadow: 0 0 0 0 rgba($color, 0.3),
0 0 0 1em rgba($color, 0.3),
0 0 0 3em rgba($color, 0.3),
0 0 0 5em rgba($color, 0.3);
}
100% {
box-shadow: 0 0 0 1em rgba($color, 0.3),
0 0 0 3em rgba($color, 0.3),
0 0 0 5em rgba($color, 0.3),
0 0 0 8em rgba($color, 0);
}
}
https://codepen.io/FabienMotte/pen/gPKVxE
如预期的那样,将 div 更改为圆形没有起作用。
在上面的代码笔中使用了 div 元素,但我可以将相同的效果应用于 svg circle 元素吗?
提前致谢。
最佳答案
您必须使用一堆圆圈而不是阴影。 <circle>
的半径不是 CSS 动画,因此作为解决方法,您必须使用缩放转换。 (SMIL 动画可以在半径上工作,但与 Microsoft 浏览器不兼容。)
rect {
fill: #4e4e4e;
}
circle {
fill: #65ff78;
opacity: 0.3;
}
svg > circle:last-child {
fill: #35ffc3;
opacity: 1;
}
#rp1 {
animation: ripple1 0.7s linear infinite;
}
@keyframes ripple1 {
0% {
transform: scale(5.5);
opacity: 0.3;
}
100% {
transform: scale(8.5);
opacity: 0.0;
}
}
#rp2 {
animation: ripple2 0.7s linear infinite;
}
@keyframes ripple2 {
0% {
transform: scale(3.5);
}
100% {
transform: scale(5.5);
}
}
#rp3 {
animation: ripple3 0.7s linear infinite;
}
@keyframes ripple3 {
0% {
transform: scale(1.5);
}
100% {
transform: scale(3.5);
}
}
#rp4 {
animation: ripple4 0.7s linear infinite;
}
@keyframes ripple4 {
0% {
transform: scale(0.5);
}
100% {
transform: scale(1.5);
}
}
<svg xmlns="http://www.w3.org/2000/svg" height="100%" width="100%">
<defs>
<g id="anims">
<circle id="rp1" r="1em" />
<circle id="rp2" r="1em" />
<circle id="rp3" r="1em" />
<circle id="rp4" r="1em" />
</g>
</defs>
<rect height="100%" width="100%" />
<use xlink:href="#anims" x="50%" y="50%"/>
<circle r="0.5em" cx="50%" cy="50%" />
</svg>
关于css - svg 对圆形标签/元素的涟漪效应,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47023922/