CSS：点击按钮中心的不同颜色的圆圈动画

Question

我有一个按钮，我想在它被点击时设置动画（理想情况下它会将状态永久更改为第二种颜色）。虽然我尝试了 background-image/liner-gradient 解决方案，但它没有达到我想要的圆形效果，也没有坚持下去。

使用 this CodePen 作为灵感，我想我会尝试使用 ::before 伪选择器为圆圈制作动画。

const ClickAnimation = keyframes`
  from {
    transform: scale(0);
    opacity: 1;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
`;

const StyledButton = styled.button`
  color: white;
  background-color: ${colors.secondary500};
  text-align: center;
  text-transform: uppercase;

  &:hover {
    background-color: ${colors.secondary400};
  }

  &::before {
    content: "";
    background-color: ${colors.secondary300};
  }

  &:active::before {
    animation: ${ClickAnimation} 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
  }

  &:disabled {
    background-color: ${colors.primary300};
  }
`

const LargeButton = styled(StyledButton)`
  width: 100%;
  line-height: 23px;
  font-size: 19px;
  font-weight: 600;
  padding: 8px 0;
  border-radius: 4px;
`

const SmallButton = styled(StyledButton)`
  height: 28px;
  width: 148px;
  border-radius: 16px;
  font-size: 15px;
  font-weight: 500;
  line-height: 18px;
`

export default Button;

虽然我的悬停效果有效，但我现在实际上没有在点击 (:active) 时获得任何动画。

Answer 1

在ClickAnimation动画结束时不透明度仍然为1。不应该是0吗？

CSS：点击按钮中心的不同颜色的圆圈动画

CSS: Animating a different colored circle from the center of a button on click

css

css-animations

reactjs

styled-components