Question

我正在使用SVG来达到波纹效果，我在动画上遇到的波纹效果不好，需要两个波纹之后需要三个波纹才能隐藏起来，而且使用三种不同的动画也可以实现平滑效果，有人可以向我指出正确的方向吗？提前。

body{ background: #802a10d6;}
svg {
  position: relative;
  z-index: 10;
  transition: all 0.5s linear;
}
img {
   position: absolute;
    height: 66px;
    width: 66px;
    top: 75px;
    left: 75px;
    transition: all 1.5s linear;
}
.rp1,
.rp2,
.rp3 {
  content: ' ';
  position: absolute;
  transition: all 1.5s linear;
  z-index: 1;
  animation: pulse 2s linear infinite;
}
.rp1 { animation-delay: 0.5s; }
.rp2 {animation-delay: 0.7s; }
.rp3{ animation-delay: 1s; }
@keyframes pulse {
  to{
    opacity: 0;
    transform: scale(1);
    transition: all 0.5 linear;
  }

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
<svg xmlns="http://www.w3.org/2000/svg" height="900" width="900">
  <svg>
      <circle class="rp1" cx="100" cy="100" r="35" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp2" cx="100" cy="100" r="45" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp3" cx="100" cy="100" r="55" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <img src="https://image.ibb.co/dBkJkV/person-4.png"/>
  </svg>
</svg>

Answer 1

我希望这是您想要实现的目标。观察：尽管您可以在此处使用opacity，但我会使用stroke-opacity

body{ background: #802a10d6;}
svg {
  position: relative;
  /*z-index: 10;
  transition: all 0.5s linear;*/
  border:1px solid
}
/*img {
   position: absolute;
    height: 66px;
    width: 66px;
    top: 75px;
    left: 75px;
    transition: all 1.5s linear;
}*/
.rp1,
.rp2,
.rp3 {
  /*content: ' ';
  position: absolute;
  transition: all 1.5s linear;
  z-index: 1;*/
  stroke-opacity: 0;
  animation: pulse 2s linear infinite;
}
.rp1 { animation-delay: 0.5s; }
.rp2 {animation-delay: 0.7s; }
.rp3{ animation-delay: 1s; }
@keyframes pulse {
  0%{stroke-opacity: 0;}
  50%{stroke-opacity: 1;}
  100%{
    stroke-opacity: 0;
    /*transform: scale(1);
    transition: all 0.5 linear;*/
  }

<svg height="200" width="200">

      <circle class="rp1" cx="100" cy="100" r="35" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp2" cx="100" cy="100" r="45" stroke="#ffffff" stroke-width="2" fill="transparent" />
     <circle class="rp3" cx="100" cy="100" r="55" stroke="#ffffff" stroke-width="2" fill="transparent" />
    
      <image xlink:href="https://image.ibb.co/dBkJkV/person-4.png" height="66" width="66" x="66" y="66"></image>

</svg>

SVG涟漪效果：无法获得正确的涟漪效果动画

1 个答案: