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

📅  最后修改于: 2021-11-07 09:12:45             🧑  作者: Mango

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

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

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



  

    
    Shake Button on Hover

  

    
             
  

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


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



  

    
    Shake Button on Hover
    

  

    
             
  

输出: