css3 鼠标点击动画

CSS3 鼠标点击动画可以让页面更有趣，增加用户体验。下面介绍几种实现方法：

/* 方法一：利用:active 伪类实现 */
button:active {
  transform: scale(0.9); /*缩小 10%*/
  Box-shadow: 0 0 10px rgba(0,0.5); /*添加阴影*/
}

/* 方法二：使用 transition 过渡动画 */
button {
  transition: transform 0.2s ease-in-out; /*设置变化时间*/
}
button:active {
  transform: scale(0.9); /*缩小 10%*/
}

/* 方法三：使用 animation 关键帧动画 */
button {
  animation: press 0.1s ease-in-out; /*设置动画*/
}
@keyframes press {
  0% {
    transform: scale(1); /*正常大小*/
  }
  50% {
    transform: scale(0.9); /*缩小 10%*/
  }
  100% {
    transform: scale(1); /*还原*/
  }
}

这些方法都是基于 CSS3 的变形（transform）属性实现。可以根据具体情况选择使用哪种方法。