脉动图像环css动画

Question

我正在尝试使用css动画围绕圆形图像创建"脉动环"动画.

我的图片是一个圆圈,宽400像素.我设法让整个图像脉冲,但我不太确定如何创建和动画图像周围的sepatate脉动环.

我想成像是静止的,环绕着它旋转.

我的代码到目前为止;

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;
  }
}

我在这里创造了一个小提琴.

我想在这里创建类似于示例的环.

我相信我非常接近.任何建议表示赞赏.

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;
}

JSFiddle中的示例