📜  使用 CSS 分割倾斜按钮悬停动画

📅  最后修改于: 2021-11-09 09:20:16             🧑  作者: Mango

可以使用 CSS 中的 before 和 after 伪类创建拆分倾斜按钮悬停动画效果。在悬停时改变偏度并交换伪类前后的位置。

脚步:

  • 创建一个名为 index.html 的 HTML 文件。
  • 为按钮创建一个 div 元素。
  • 为按钮添加样式。
  • 在按钮的before和after伪类上,设置按钮的背景颜色,设置宽度为50%,并将两者都转换成倾斜某个角度。
  • 在按钮的before伪类上,将顶部位置设置在按钮顶部位置的上方。
  • 在按钮的after伪类上,将顶部位置设置在按钮顶部位置的下方,并将左侧位置设置为按钮宽度的50%。
  • 悬停时,将两个伪类的顶部位置设置为 0,并将偏度更改为 0 度。

代码:

HTML


  

    

  

    
        
GeeksforGeeks
    
  


输出: