Question

我正在尝试使用css动画在圆形图像周围创建一个“脉动环”动画。

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

我想成像是静止的，并且环绕着它旋转。

到目前为止我的代码;

HTML

    function modify_time(){
                var start_time=$('#start_time').val();
                var end_time=$('#end_time').val();
                if(start_time!='' && end_time!=''){alert(start_time); alert(end_time);
 var s_time = start_time.split(":");
var e_time = start_time.split(":");
                   if( s_time[0] > e_time[0]){
                     alert('select valid time');
                        $('#start_time').val('');
                        $('#end_time').val('');
                    }else if(s_time[0] == e_time[0]){
                        if(s_time[1] >=e_time[1]){
                       alert('select valid time');
                        $('#start_time').val('');
                        $('#end_time').val('');
                        }
                    }

                }
            }

CSS

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

我创建了一个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

Answer 2

我就是这样做的：

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

.circle {
  border: solid 13px black;
  border-radius: 100%;
  position: absolute;
  top: 40px;
  left: 40px;
  width: 350px;
  height: 350px;
  z-index: 10;
  -webkit-animation: pulse 3s ease-out;
  -moz-animation: pulse 3s ease-out;
  animation: pulse 3s ease-out;
  -webkit-animation-iteration-count: infinite;
  -moz-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

Here is the JSFiddle demo

基本上添加另一个div，给它圆形，将它叠加在图像上，然后添加动画：）

Answer 3

这就是我这样做的方式。

https://codepen.io/anon/pen/Ombmrp

基本上我有一个圆圈形状，然后我在它周围画出更大的环，就像4次一样。然后只使用缩放/不透明度动画，使每个环上都有一些延迟，看起来好多了。

希望这有帮助！

代码：

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

.circle {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  border-radius: 50px;
  display: flex;
  justify-content: center;
  align-items: center;

span {
  position: absolute;
  text-align: center;
}

.red-medium-circle {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background: transparent;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.5), inset 2px 2px 4px rgba(0,0,0,.5);
  border: 2px solid red;
  animation: pulsate infinite ease-in-out 2s 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

脉动图像环css动画

3 个答案: