如何修改代码实现匹配示例的多次脉冲及扭转效果按钮动画

你需要的是约3次脉冲（间隔300-400ms）且带有扭转效果的按钮，现有代码的问题在于动画时长过长、循环无限、阴影扩散逻辑不符合示例，以下是修改后的完整代码及说明：

修改要点 #

• 取消无限循环，设置动画仅播放3次
• 调整总动画时长为2.1s，匹配3次脉冲的间隔需求
• 重构阴影动画逻辑，让多层阴影依次向外扩散，贴近示例的分层脉冲效果
• 添加按钮扭转的旋转动画，在脉冲过程中加入小角度往复旋转
• 移除冲突的transition，避免干扰动画效果

修改后的代码 #

CSS #

body {
  background: black;
}

.button {
  padding: 0.75em 1.5em;
  border: 3px solid white;
  border-radius: 15px;
  background: transparent;
  color: white;
  font-size: 1rem;
  cursor: pointer;
  /* 初始状态确保动画复位 */
  transform: rotate(0deg);
}

.button:hover {
  animation: pulseTwist 2.1s ease-in-out 1;
}

@keyframes pulseTwist {
  0% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    transform: rotate(0deg);
  }
  15% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0),
                0 0 0 0 rgba(255, 255, 255, 0.6);
    transform: rotate(2deg);
  }
  30% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0),
                0 0 0 16px rgba(255, 255, 255, 0),
                0 0 0 0 rgba(255, 255, 255, 0.4);
    transform: rotate(0deg);
  }
  45% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0),
                0 0 0 16px rgba(255, 255, 255, 0),
                0 0 0 24px rgba(255, 255, 255, 0);
    transform: rotate(-2deg);
  }
  60% {
    box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
    transform: rotate(0deg);
  }
  75% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0),
                0 0 0 0 rgba(255, 255, 255, 0.6);
    transform: rotate(2deg);
  }
  90% {
    box-shadow: 0 0 0 8px rgba(255, 255, 255, 0),
                0 0 0 16px rgba(255, 255, 255, 0),
                0 0 0 0 rgba(255, 255, 255, 0.4);
    transform: rotate(0deg);
  }
  100% {
    box-shadow: 0 0 0 24px rgba(255, 255, 255, 0);
    transform: rotate(0deg);
  }
}

HTML #

<button class="button">Button</button>

效果说明 #

• 脉冲效果：每层阴影依次向外扩散消失，每次脉冲间隔约350ms，总共完成3次完整脉冲循环
• 扭转效果：按钮在脉冲过程中会进行小角度的左右旋转，扭转幅度为±2deg，和脉冲动作同步
• 动画结束后按钮自动复位到初始状态

内容的提问来源于stack exchange，提问作者Vasil Nikolov