html - 脉动图像环 css 动画

Question

我正在尝试使用 CSS 动画围绕圆形图像创建“脉动环”动画。

我的图像是一个圆圈，宽 400 像素。我已经设法使整个图像脉动起来，但是我不太确定如何在图像周围创建分离的脉动环并为其设置动画。

我希望图像是静态的，环在它周围跳动。

到目前为止我的代码；

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png"></div>

CSS

.container {
  padding: 20px;
}

@-webkit-keyframes pulse_animation {
  0% {
    -webkit-transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.1);
  }
  100% {
    -webkit-transform: scale(1);
  }
}

.pulse {
  -webkit-animation-name: 'pulse_animation';
  -webkit-animation-duration: 3000ms;
  -webkit-transform-origin: 70% 70%;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-timing-function: linear;
  -webkit-animation: pulsate 3s ease-out;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
  0% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
  50% {
    -webkit-transform: scale(1.1, 1.1);
    opacity: 1;
  }
  100% {
    -webkit-transform: scale(1, 1);
    opacity: 1;
  }
}

我创建了一个 fiddle here .

我想创建类似于 example here 的环.

我确信我非常接近。任何建议表示赞赏。

Answer 1

您需要一个与图像宽度/高度相同的新 div，为其添加边框并设置动画。

HTML

<div class="container">
  <img class="pulse" src="http://freevector.co/wp-content/uploads/2012/02/51770-placeholder-in-a-circle-outline.png">
  <div class="pulse-ring">
  </div>

</div>

CSS

.pulse-ring {
  content: '';
  width: 400px;
  height: 400px;
  border: 10px solid #F00;
  border-radius: 50%;
  position: absolute;
  top: 18px;
  left: 18px;
  animation: pulsate infinite 1s;
}

Example in JSFiddle