Question

是否可以将CSS'transition限制为仅定位盒阴影的颜色，而不是其他内容？

例如，您有一个带有框阴影的按钮。当您单击按钮时，它向下移动并且框阴影缩小，使其看起来好像按钮已经压缩。 See this example。

但是 - 我也希望按钮能够改变颜色，我希望这个效果能够转换。我可以这样做：

#button {
  transition: background-color 0.2s linear;
  transition: box-shadow 0.2s linear;
}

我的问题是按下按钮时也会发生这种转换，而不仅仅是颜色发生变化时。这意味着盒子阴影会慢慢收缩，而按钮会立即向下移动。 See this example。我希望按钮的按下和移动是瞬时的，而不是转换，所以 CSS的transition: box shadow属性是否可能只影响框阴影的颜色？

如果没有，我还能尝试其他方法吗？也许用jQuery？谢谢。

Answer 1

是的，你可以只为阴影颜色制作动画，虽然你需要一个小技巧，使用伪元素::after作为实际的绿色按钮，然后在按钮本身上设置阴影。

通过这种方式，您可以移动＆＃34;按钮＆＃34;单独，同时只为阴影设置动画。在下面的示例中，我选择将其设置为红色，以便于查看它是否有效。

＆＃13;

.button {
  display: inline-block;
  padding: 0;
  cursor: pointer;
  outline: none;
  border: none;
  border-radius: 15px;
  box-shadow: 0 9px #999;
  transition: box-shadow 1s linear;
  background: transparent;
}
.button::after {
  content: attr(data-buttontext);
  display: inline-block;
  padding: 15px 25px;
  font-size: 24px;
  text-align: center;
  color: #fff;
  background-color: #4CAF50;
  border-radius: inherit;
}
.button:active {
  box-shadow: 0 9px #f00;
}
.button:active::after {
  background-color: #3e8e41;
  transform: translateY(4px);
}

＆＃13;

<button class="button" data-buttontext="Example"></button>

＆＃13;

CSS过渡到JUST框阴影颜色

1 个答案: