📜  如何使用 HTML 和 CSS 在悬停时倾斜文本?

📅  最后修改于: 2021-09-01 03:04:02             🧑  作者: Mango

可以使用 HTMLCSS来创建倾斜文本动画效果,这个动画看起来很酷,可以在网站中使用,使它们看起来更有活力,以下部分将指导如何创建所需的动画效果。

第一部分:在本部分中,我们将创建一个基本的div标签,其中包含各种span标签。

HTML



  
  
  Skew Text


  
    G     E     E     K     S     F     O     R     G     E     E     K     S          


CSS


HTML



  
  
  Skew Text


  

  
    G     E     E     K     S     F     O     R     G     E     E     K     S          


第二部分:在本节中,我们将首先使用基本 CSS 属性设计 span标签,我们将使用nth-child()选择器选择元素的子元素,并使用skewY()属性在悬停时产生所需的效果。

CSS 代码:

CSS


Final Code:是上面两段代码的组合

HTML




  
  
  Skew Text


  

  
    G     E     E     K     S     F     O     R     G     E     E     K     S          

输出: