[分享]css3实现鼠标经过按钮晃动

CSS3是一种用于设计和开发网页界面的语言，它拥有很多有用的功能，其中之一就是可以实现鼠标经过按钮晃动的效果。button:hover { animation: shake 0.5s; animati...

CSS3是一种用于设计和开发网页界面的语言，它拥有很多有用的功能，其中之一就是可以实现鼠标经过按钮晃动的效果。

button:hover {
  animation: shake 0.5s;
  animation-iteration-count: infinite;
}

@keyframes shake {
  0% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
  100% { transform: translateX(0); }
} 

以上代码可以应用于按钮元素（<button>）上，当鼠标悬停在按钮上时，按钮会不断地左右晃动。这个效果由CSS动画（animation）实现，通过调整按钮的transform属性来实现晃动的效果。

关于其他CSS3的用法和技巧，可以参考一些优秀的CSS3教程课程，例如MDN网站上的CSS入门教程。在实践中，需要结合HTML和JavaScript等技术进行网页开发，以创造出更加美观和交互性强的网页界面。