[分享]CSS3按钮连续按

CSS3按钮连续按是指当用户按住鼠标在一个按钮上不松手时，按钮会连续触发点击事件，而不是只有一次点击事件。这种效果在实现一些需要连续触发的功能和游戏中经常用到。使用CSS3实现按钮连续按效果，需要用到...

CSS3按钮连续按是指当用户按住鼠标在一个按钮上不松手时，按钮会连续触发点击事件，而不是只有一次点击事件。这种效果在实现一些需要连续触发的功能和游戏中经常用到。

使用CSS3实现按钮连续按效果，需要用到CSS的:active伪类。当用户按下鼠标时，按钮的状态变为活动状态，并触发相关CSS样式，当用户松开鼠标时，按钮的状态恢复为常态状态，样式也相应更新。

.button {
  background-color: #008CBA;
  border: none;
  color: white;
  padding: 10px 20px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 10px;
}

.button:active {
  background-color: #00487E;
  box-shadow: none;
  transform: translateY(4px);
} 

上述代码中，.button是按钮的类名，其中设置了按钮的基本样式，如背景色、边框、文字颜色等。.button:active是按钮处于活动状态时的样式，通过transform: translateY(4px)设置按钮下移4个像素的效果，模拟按钮被按下的视觉效果。

需要注意的是，按钮连续按效果不是通过CSS实现的，而是需要用JavaScript来控制。当用户按下按钮时，触发mousedown事件，通过JavaScript设置一个计时器，每隔一段时间模拟触发一次按钮的点击事件。当用户松开鼠标时，触发mouseup事件，清除计时器。