Question

我有一个想要在单击时进行动画处理的按钮（理想情况下，它将状态永久更改为第二种颜色）。当我尝试使用背景图像/衬里渐变解决方案时，它没有达到我想要的圆圈效果，并且没有持久。

以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：从点击按钮的中心开始动画一个不同的彩色圆圈

1 个答案: