[分享]css3按钮抖动特效

CSS3按钮抖动特效是一种很酷的效果，通过CSS3的transition属性和animation属性实现，可以为网站添加一些动感和趣味性。这里给大家分享一个CSS3按钮抖动特效的实现方法：.btnsh...

CSS3按钮抖动特效是一种很酷的效果，通过CSS3的transition属性和animation属性实现，可以为网站添加一些动感和趣味性。

这里给大家分享一个CSS3按钮抖动特效的实现方法：

.btn-shake {
  display: inline-block;
  padding: 10px 24px;
  font-size: 20px;
  background-color: #008CBA;
  color: #fff;
  text-align: center;
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.2s;
}

.btn-shake:hover {
  animation: shake 0.5s;
}

@keyframes shake {
  0% {
    transform: translateX(0);
  }
  20% {
    transform: translateX(-10px);
  }
  40% {
    transform: translateX(10px);
  }
  60% {
    transform: translateX(-10px);
  }
  80% {
    transform: translateX(10px);
  }
  100% {
    transform: translateX(0);
  }
} 

以上代码中，.btn-shake是按钮的类名，可以根据实际情况自定义；transition属性指定了鼠标经过按钮时的过渡效果；hover伪类触发了shake动画；@keyframes定义了动画的关键帧，通过transform属性实现了按钮的抖动效果。

这个按钮抖动特效可以应用在多个场景，比如提交按钮、链接等，可以提高用户体验和网站的趣味性。