代码之家 › 专栏 › 技术社区 › Asiya Fatima

SVG涟漪效果:未获得正确的涟漪效果动画

svg css3 html

-1

Asiya Fatima · 技术社区 · 7 年前

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>

1 回复 | 直到 7 年前

enxaneta 7 年前

我希望这就是你想要实现的。观察:虽然你可以使用 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>