向按钮添加 CSS 脉冲动画，无需悬停

Question

我想向我的按钮添加动画，而不必将鼠标悬停在其上，就像此处的示例一样向按钮添加 CSS 晃动动画而无需悬停

但有不同的动画，最好是脉冲动画，但我的编码知识不是那么多

有人可以帮我吗 提前谢谢你。

Answer 1

这是您可以尝试添加脉冲动画的代码：

.pulse-button {
  /* Button default styles, customize them to match your button */
  display: inline-block;
  padding: 10px 20px;
  color: #fff;
  background-color: #3498db;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  
  /* Apply the pulse animation */
  animation: pulse 1s infinite;
}


@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

为您分解：

animation: pulse 1s infinite;

动画属性将脉冲效果应用于按钮。该属性指定：

• 动画的名称（在本例中为脉冲，与名称匹配） 我们接下来定义的 @keyframes 动画）。
• 动画一个周期的持续时间（1s或1秒）。
• 动画迭代次数（无限确保动画保持 无限重复）。

然后是关键帧动画：

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

这个@keyframes规则定义了实际的脉冲动画。脉冲动画的工作原理如下：

• 0%：在动画开始时（0% 标记），按钮处于默认大小 (scale(1))。
• 50%：在动画进行到一半时（50% 标记），按钮的大小稍微增加到其原始大小的 105%（scale(1.05)）。这产生了“脉冲”效果。
• 100%：到动画结束（100%标记）时，按钮返回到其默认大小（scale(1)），完成一个循环。

任何具有 .pulse-button 类的按钮都会通过稍微增加然后返回到其原始大小来连续“脉冲”。

这是 JSFiddle 上工作代码的演示