animate .css制作按钮

使用 Animate.css 制作按钮

Animate.css 是一个流行的 CSS 动画库，可以轻松为按钮添加各种动画效果。以下是具体实现方法：

引入 Animate.css

在 HTML 文件中通过 CDN 引入 Animate.css：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>

创建基础按钮

创建一个普通的 HTML 按钮元素：

<button class="my-button">点击我</button>

添加基础样式

为按钮添加一些基础 CSS 样式：

.my-button {
  padding: 10px 20px;
  background-color: #4CAF50;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
}

添加悬停动画

使用 Animate.css 的动画类实现悬停效果：

<button class="my-button animate__animated animate__pulse">悬停我</button>

添加点击动画

通过 JavaScript 为点击事件添加动画：

<button id="clickButton" class="my-button">点击动画</button>

<script>
document.getElementById('clickButton').addEventListener('click', function() {
  this.classList.add('animate__animated', 'animate__rubberBand');

  // 动画结束后移除类，以便下次可以再次触发
  this.addEventListener('animationend', function() {
    this.classList.remove('animate__animated', 'animate__rubberBand');
  });
});
</script>

常用动画效果推荐

• animate__bounce - 弹跳效果
• animate__flash - 闪烁效果
• animate__pulse - 脉冲效果
• animate__rubberBand - 橡皮筋效果
• animate__shakeX - 水平摇晃
• animate__swing - 摆动效果
• animate__tada - 庆祝效果

控制动画时长

可以通过添加辅助类控制动画速度：

<button class="my-button animate__animated animate__bounce animate__faster">快速弹跳</button>

可用速度类包括：

• animate__slow - 2秒
• animate__slower - 3秒
• animate__fast - 800毫秒
• animate__faster - 500毫秒

延迟动画

使用 animate__delay 类可以设置动画延迟：

<button class="my-button animate__animated animate__fadeIn animate__delay-2s">2秒后淡入</button>

延迟时间可选：1s, 2s, 3s, 4s, 5s