css3鼠标点击时执行动画

CSS3中，我们可以使用:hover属性实现鼠标悬停时的样式变化，但是我们是否知道，在CSS3中还提供了哪些方法来实现鼠标交互效果呢？今天，就让我们来讲讲如何在鼠标点击时执行动画。

.button {
  width: 200px;
  height: 50px;
  background: #fa8072;
  border-radius: 5px;
  color: #fff;
  text-align: center;
  line-height: 50px;
  font-size: 18px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.button:active {
  transform: translateY(3px);
  background: #ff6347;
} 

上面的代码中，我们创建了一个按钮样式，当鼠标点击时，按钮会有一个向下的位移效果，并且背景色会有一个改变。

在CSS3中，我们可以使用:active伪类来选中正在被点击的元素并为其设置样式。我们在这里使用transform属性来实现按钮的位移效果，并使用background属性改变背景颜色。

需要注意的是，我们在按钮样式中添加了一个cursor: pointer属性。这一属性可以改变鼠标指针在元素上的显示样式，使得鼠标在按钮上指向时变为手形指针，提示用户该元素可以被点击。

总的来说，在CSS3中实现鼠标点击时执行动画也是一个非常简单的操作，我们只需要使用:active伪类来选中正在被点击的元素，并为其添加相应的样式即可。