使用 HTML 和 CSS 在悬停时摇动按钮

摇动按钮效果也称为摆动效果，可用于使网站看起来更具响应性和动态性。这是理解CSS中@keyframes规则概念的最佳效果之一。

方法：可以使用HTML和CSS创建摇动按钮效果或动画，首先，我们将使用HTML创建一个基本按钮，然后我们将使用@keyframes规则指定动画代码。以下部分将指导您如何创建效果。

HTML 代码：在本节中，我们将使用按钮标记创建一个基本按钮。

  

    
    

  

    

        Button
    

  

CSS 代码：在本节中，首先我们将使用 CSS 基本属性设计按钮，然后我们将使用@keyframes规则创建摇晃效果或动画，我们将使用translateX()和rotate()函数来重新定位按钮当我们将鼠标悬停在 x 轴上的元素上时，它会创建所需的效果。

完整代码：是以上两个代码段的组合。

  

    
    
    

  

    

        Button
    

  

输出：