📌  相关文章
📜  使用 HTML 和 CSS 在悬停时缩小文本

📅  最后修改于: 2021-08-30 02:36:10             🧑  作者: Mango

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

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




  
  
  Shrink Text

  

  

    GEEKS
    FOR
    GEEKS
  
      

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

最终代码：是以上两个代码段的组合。 




  
  
  Shrink Text


  

  

    GEEKS
    FOR
    GEEKS
  
  

输出：