CSS动画，交互随心，妙不可言！

2023-12-20 07:22:09

在前端开发中，动画和交互是让网页更加生动有趣的重要元素。传统上，实现动画和交互需要借助JavaScript，但你知道吗？其实纯CSS也能实现可交互动画！

纯CSS实现可交互动画的原理是利用CSS3的动画和伪类选择器。通过在元素上应用动画，并使用鼠标悬停、点击等伪类选择器来触发动画，就可以实现响应用户的交互式动画效果。

举个例子，我们想让一个按钮在用户点击时跳动一下。首先，我们需要给按钮添加一个CSS类，比如btn-pulse，然后在CSS文件中为这个类定义动画：

.btn-pulse {
  animation: pulse 1s infinite alternate;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

这个动画定义了一个名为pulse的动画，它将元素的缩放值在1和1.1之间交替变化，实现跳动效果。动画持续时间为1秒，并无限循环。

接下来，我们需要在按钮上添加一个鼠标点击事件监听器，并在事件处理函数中添加以下代码：

document.querySelector('.btn-pulse').classList.add('active');

setTimeout(function() {
  document.querySelector('.btn-pulse').classList.remove('active');
}, 1000);