悬停按钮无法使用关键帧正确减少

Posted 2023-03-06

【中文标题】悬停按钮无法使用关键帧正确减少

【英文标题】：Button on hover does not reduce properly using keyframes

【发布时间】：2019-11-12 00:05:24

【问题描述】：

如何根据这支笔 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

【问题讨论】：

你需要考虑scale()而不是width

笔使用scale()创建脉冲效果，而不是widthcodepen.io/woolandcotton/pen/mBmLwq

我好像没有看到代码，因为我没有登录。感谢支持

【参考方案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>

【讨论】：

抱歉转换拼写错误：/

我唯一注意到的是，一旦过渡开始，颜色就会变得模糊，只有在结束时才会看起来很整洁。有解决办法吗？

不，只是因为文字是动画的，所以看起来有点模糊