css 量产特效按钮

{["一", "二", "三", "四", "五"].map((text, index) => (
  <Button
    primary={randomColor()}
    key={text}
    onClick={() => setAnimateIndex(index + 1)}
  >
    第{text}次战役
  </Button>
))}

​​Button​​

export const Button = styled.button<{
  primary: string;
}>`
  padding: 0.5rem;
  width: 8rem;
  border: none;
  border-radius: 0.5rem;
  background-color: ${props => props.primary + "52"};
  white-space: nowrap;
  color: ${props => adjustColor(props.primary, -90)};
  margin: 0.3rem;
  font-weight: bold;
  cursor: pointer;
  transition: all 0.3s ease-in;
  font-size: 0.7rem;
  overflow: hidden;
  position: relative;

  ::after,
  ::before {
    content: "";
    width: 4rem;
    height: 4rem;
    background-color: ${props => props.primary};
    border-radius: 4rem;
    transition: transform 0.4s ease-in-out, top 0.3s ease-in-out;
    position: absolute;
    z-index: -1;
    left: 2rem;
    top: 2rem;
  }

  ::before {
    left: 2rem;
    top: -4rem;
  }

  :hover {
    box-shadow: 0 0 1rem 3px ${props => props.primary};
    color: ${props => adjustColor(props.primary, -130)};
    ::after {
      transform: scale(2);
      top: -1rem;
    }
    ::before {
      transform: scale(2);
      top: 1rem;
    }
  }

  :active {
    transform: translateY(3px);
    transition-duration: 0.1s;
  }
`;

/*
 * @Author: hongbin
 * @Date: 2022-02-10 17:19:09
 * @LastEditors: hongbin
 * @LastEditTime: 2022-02-10 18:07:08
 * @Description:根据颜色获取相应颜色
 */

/**
 * @description: 调整颜色更亮更暗
 * @param {string} color 六位十六禁止颜色
 * @param {number} range 正负数决定颜色更改
 * @return {string} new color
 */

export function adjustColor(color: string, range: number) {
  let newColor = "#";
  for (let i = 0; i < 3; i++) {
    const hxStr = color.substr(i * 2 + 1, 2);
    let val = parseInt(hxStr, 16);
    val += range;
    if (val < 0) val = 0;
    else if (val > 255) val = 255;
    newColor += val.toString(16).padStart(2, "0");
  }
  return newColor;
}

/**
 * @description:随机6位十六进制颜色
 */

export const randomColor = () => "#" + Math.random().toString(16).slice(-6);