旋转按钮组件

效果图

Man JS

import styles from './style.less'
import TurnButton from '@/common/TurnButton'
const index = () =>
{
    return (
        <div className={styles.container}>
            <TurnButton value={'套你猴子'} render={(name) =>
            {
                return (<button className={styles.rotateBtn}>{name}</button>);
            }} ></TurnButton>
        </div>
    );
};
export default index

Man CSS

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: pink;
  box-sizing: border-box;

  .rotateBtn {
    width: 120px;
    height: 70px;
    color: #0ebeff;
    // ! 边框颜色
    background: #fff;
    cursor: pointer;

    // 滚动的颜色
    &::before {
      background-color: yellow;
    }

    // 背景颜色
    &::after {
      background: #000;
    }

    // 鼠标经过停止动画
    &:hover::before {
      animation-play-state: paused;
    }

    // 鼠标经过线占满屏
    &:hover {
      background: yellow;
    }
  }
}

TurnButton JS

import styles from './style.less'
const index = ({ value, render }) =>
{
    return (
        <div className={styles.buttonContainer}>
            {render(value)}
        </div>
    );
};
export default index

TurnButton CSS

.buttonContainer {
  position: relative;

  button {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 80px;
    color: #0ebeff;
    font-size: 24px;
    background: #000;
    border: none;
    outline: none;
    z-index: 1;
    border-radius: 10px;
    // outline: 4px solid #fff;
    overflow: hidden;

    &::before {
      content: '';
      position: absolute;
      background-color: #0ebeff;
      width: 200%;
      height: 200%;
      z-index: -2;
      left: 50%;
      top: 50%;
      animation: rotate 3s infinite linear;
      transform-origin: 0 0;
    }

    &::after {
      content: '';
      position: absolute;
      background: #000;
      width: calc(100% - 4px);
      height: calc((100% - 4px));
      left: 2px;
      top: 2px;
      border-radius: 10px;
      z-index: -1;
    }
  }

  @keyframes rotate {
    to {
      transform: rotate(1turn);
    }
  }
}