CSS动画（animation）事例

1. 鼠标点击特效

  @keyframes effectBoxMove {
    0% {
      transform: translateY(-20px);
      opacit: 1;
    }
    100% {
      transform: translateY(-300px);
      opacity: 0;
    }
  }

  .effectBox {
    color: red;
    position: absolute;
    font-size: 16px;
    white-space: nowrap;
    animation: effectBoxMove 2s linear;
  }

  const textArr = [
    '对党忠诚',
    '纪律严明',
    '赴汤蹈火',
    '竭诚为民',
    '富强',
    '民主',
    '文明',
    '和谐',
    '自由',
    '平等',
    '公正',
    '法治',
    '爱国',
    '敬业',
    '诚信',
    '友善',
  ];

  // 生成随机数
  const randomIdx = () => {
    return Math.floor(Math.random() * textArr.length);
  };

  document.body.addEventListener('click', (event) => {
    const randomPhrase = '❤' + textArr[randomIdx()] + '❤';
    const mouseEffectEle = document.createElement('span');
    mouseEffectEle.className = 'effectBox';
    mouseEffectEle.textContent = randomPhrase;
    mouseEffectEle.style.left = event.pageX - mouseEffectEle.offsetWidth / 2 + 'px';
    mouseEffectEle.style.top = event.pageY - mouseEffectEle.offsetHeight + 'px';

    document.body.appendChild(mouseEffectEle);
    setTimeout(function () {
      mouseEffectEle.remove();
    }, 1000); // 1s延迟确保动画完成
  });

2. 按钮悬停旋转

 <BellOutlined class="bell-button" title="系统消息" />
 <SettingOutlined class="setting-button" title="系统设置"/>

  .bell-button {
    &:hover {
      animation: bell-ring 1s both;
    }
  }
  /* 定义摆动动画 */
  @keyframes bell-ring {
    0%,
    100% {
      transform-origin: top;
    }

    15% {
      transform: rotateZ(15deg);
    }

    30% {
      transform: rotateZ(-15deg);
    }

    45% {
      transform: rotateZ(10deg);
    }

    60% {
      transform: rotateZ(-10deg);
    }

    75% {
      transform: rotateZ(5deg);
    }
  }

  .setting-button {
    &:hover {
      animation: rotate-box 2s linear 0s 1;
    }
  }

  /* 定义旋转动画 */
  @keyframes rotate-box {
    // from {
    //   transform: rotate(0);
    // }
    // to {
    //   transform: rotate(1turn);
    // }
    0% {
      transform: rotate(0);
    }
    50% {
      transform: rotate(0.5turn);
    }
    100% {
      transform: rotate(1turn);
    }
  }