颤动文本按钮形状 - TypeScript

在 TypeScript 中使用颤动文本按钮形状，可以使按钮看起来更加生动，让用户更容易注意到它。颤动的效果可以通过 CSS 动画来实现。在下面的代码演示中，我们将使用 border-radius 和 box-shadow 属性来创建一个圆形的按钮，并使用 @keyframes 规则创建动画。

import React from 'react';
import './style.css';

interface Props {
  label: string;
  onClick: () => void;
}

const ShakingButton: React.FC<Props> = ({ label, onClick }) => {
  return (
    <button className="shaking-button" onClick={onClick}>
      {label}
    </button>
  );
};

export default ShakingButton;

CSS 样式

.shaking-button {
  border: none;
  border-radius: 50%;
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.4);
  color: #fff;
  cursor: pointer;
  font-size: 1rem;
  font-weight: bold;
  height: 3rem;
  margin: 1rem;
  text-align: center;
  text-transform: uppercase;
  transition: box-shadow 0.3s ease;
  width: 3rem;
}

.shaking-button:hover {
  box-shadow: 0 0 0 2rem rgba(255, 255, 255, 0.2);
}

.shaking-button:focus {
  outline: none;
}

.shaking-button:active {
  animation: shake 0.5s linear;
  transform-origin: center;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-0.5rem);
  }
  40% {
    transform: translateX(0.5rem);
  }
  60% {
    transform: translateX(-0.5rem);
  }
  80% {
    transform: translateX(0.5rem);
  }
  100% {
    transform: translateX(0);
  }
}

效果演示

使用上面的代码，您可以创建一个颤动的圆形按钮，如下图所示：

总结

在 TypeScript 中使用颤动文本按钮形状，并不难。只需要使用 CSS 动画和 @keyframes 规则来实现。以上代码供您参考，希望能帮助您打造更生动的用户界面！