使用 HTML 和 CSS 在悬停时缩小文本

可以使用一些 HTML 和 CSS 属性来缩小或压缩文本，您可以在网站中将此动画用作标题或副标题，以下部分将指导您如何创建所需的效果。

HTML 代码：在本节中，我们有简单的div元素，其中包含用span标签分隔的文本。

  
  
  

  

  

    GEEKS
    FOR
    GEEKS
  
      

CSS 代码：在此代码 fisr 中，我们使用基本 CSS 属性设计 div元素，然后使用 nth-child()选择器创建缩小效果，并将鼠标悬停在文本上时将字母间距设置为-1em。

Final Code：是上面两个代码段的组合。

  
  
  


  

  

    GEEKS
    FOR
    GEEKS
  
  

输出：