Question

如何根据这只笔here看着脉冲按钮，使我的按钮在悬停时减小尺寸？

我的CSS看起来像这样：

.pulse {
  margin:100px;
  display: block;
  width: 170px;
  height: 22px;
  background: #cca92c;
  cursor: pointer;
  box-shadow: 0 0 0 rgba(204,169,44, 0.4);
}

.pulse:hover {
  animation: pulse 2s infinite;
}

@keyframes pulse {
    0%{
        width: 170px;
    }
    50%{
        width: 120px;
    }
}

HTML：

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

当我将鼠标悬停时，宽度会减小，但是效果与参考笔不同，如果这是正确的解释，则参考笔的所有面都会变小。

可以找到我的笔here

Answer 1

尝试添加变换以获取动画

.pulse {
  margin: 100px;
  display: block;
  width: 170px;
  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;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  70% {
    transform: scale(.9);
  }
  100% {
    transform: scale(1);
  }
}

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

使用关键帧无法将鼠标悬停在按钮上

1 个答案: