📜  使用 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   
  

输出: