为什么我的按钮动画在CSS中不起作用？

c3frrgcw 于 2023-05-30 发布在其他

关注(0)|答案(1)|浏览(164)

“我跟随youtube来构建按钮悬停动画，但它不能工作。这个按钮应该有一个从左到右的颜色边，当光标指向按钮时也会改变文本颜色。在悬停部分我把scaleX（1）可以，t看到任何变化，按钮已显示颜色，如果我把2后，我写的按钮。幻灯片，我的光标没有工作时，指向按钮

button.slide::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--accent-color);
  transition: transform, 300ms ease-in-out;
  transform: scaleX(0);
  transform-origin: left;
}

button.slide:hover::before,
button.slide:focus::before {
  transform: scaleX(2);
}

button.slide {
  transition: color 300ms ease-in-out;
  z-index: -1;
}

button.slide:hover,
button.slide:focus {
  color: white;
}

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

css

来源：https://stackoverflow.com/questions/76321536/why-isnt-my-button-animation-working-in-css

1条答案

按热度按时间

koaltpgm1#

这就是你想要的吗

button.slide::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: var(--accent-color);
  transition: transform, 300ms ease-in-out;
  transform: scaleX(0);
  transform-origin: left;
}

button.slide:hover::before,
button.slide:focus::before {
  /* The animation only needs to fill the button */
  transform: scaleX(1);
}

button.slide {
  /* Used to restrict the ::before element */
  position: relative;
  transition: color 300ms ease-in-out;
  /* hover cannot be triggered when zIndex is -1 */
  z-index: 1;
  --accent-color: red
}

button.slide:hover,
button.slide:focus {
  color: white;
}

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

赞(0）回复(0）举报 2023-05-30

我来回答

为什么我的按钮动画在CSS中不起作用？

1条答案

相关问题

热门标签

最新问答