Question

我正在尝试在图像上创建脉冲效果，但到目前为止它还没有工作。我尝试过span元素，它的工作原理如下：

HTML：

<span class="pulse"></span>

CSS：

.pulse {
  margin:100px;
  display: block;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@-webkit-keyframes pulse {
  0% {
    -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -webkit-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -webkit-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}
@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 10px rgba(204,169,44, 0);
      box-shadow: 0 0 0 10px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}

我想和这张图片一样：

<a href="javascript:void(0)" class="item">
  <img src="https://image.ibb.co/cNjXna/guided_inv_icon.png" alt="">
</a>

当页面加载时，图像应该具有脉冲效果或仅使图像稍微大一点2秒以指示交互性，然后图像应保持其原始形状。

有什么建议吗？

我创建了这支笔：https://codepen.io/maketroli/pen/ZyOJYM

修改

我需要在黄色圆圈下方的图像中创建相同的效果。由span制作的黄色圆圈正在按照下图显示我想要实现的目标。

Answer 1

您可以使用下面的代码行来使用HTML和CSS3执行脉动动画效果：这里我使用了css的keyframe属性来执行动画效果。

<span class="pulse"></span>

<style>
.pulse {
  margin:100px;
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #ff8717;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
  animation: pulse 2s infinite;
}
.pulse:hover {
  animation: none;
}

@keyframes pulse {
  0% {
    -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
    box-shadow: 0 0 0 0 rgba(204,169,44, 0.4);
  }
  70% {
      -moz-box-shadow: 0 0 0 30px rgba(204,169,44, 0);
      box-shadow: 0 0 0 30px rgba(204,169,44, 0);
  }
  100% {
      -moz-box-shadow: 0 0 0 0 rgba(204,169,44, 0);
      box-shadow: 0 0 0 0 rgba(204,169,44, 0);
  }
}


</style>

Answer 2

您可以将相同的动画应用于图像，类似于将动画应用于span元素的方式。

.item img{
animation: pulse 2s infinite;
}

查看此pen

修改

为了在2秒内显示更大的图像然后将其缩小到正常尺寸，我添加了magnified动画。

@keyframes magnified{ 0%{ transform: scale(1.2,1.2); } 70%{ transform: scale(1.2,1.2); } 100%{ transform: scale(1,1); } }

您可以为元素添加多个动画：

.item img{ animation: pulse 2s infinite, magnified 2s 1; }

我更新了pen以显示这些效果。

如何在页面加载时在图像上创建脉冲效果几秒钟？

2 个答案: