📜  如何使用 CSS 在鼠标移动时水平拆分文本?

📅  最后修改于: 2021-10-29 03:41:11             🧑  作者: Mango

鼠标移动时拆分文本也称为“拆分”效果或“中断”效果。这种效果过去在网页设计中非常流行,但现在随着新的网页设计模式的出现,它开始失去地位。

方法:方法是使用前后选择器将文本分成两部分。然后我们将使用悬停选择器使效果仅在鼠标悬停时可见。现在,让我们看看上述方法的实现。

HTML 代码: HTML 代码用于创建正文的结构。在以下代码中,

元素用于在屏幕上写入文本。



  

    
    
  
    Split Effect 

  

    

        GeeksforGeeks     

  

CSS 代码:

  • 第 1 步:首先,我们将文本居中对齐,并为其提供字体大小和基本样式。
  • 第 2 步:我们使用 before 选择器使文本的上半部分为白色。
  • 第 3 步:然后使用 after 选择器覆盖我们使用 before 选择器创建的白色区域,以便我们稍后可以使用悬停来发现它。
  • 第 4 步:现在使用悬停来揭示鼠标悬停的效果。

提示:您可以使用不同的 z-index 值来确保顺序保持不变,并且代码中使用的边距值可以根据文本的 font-size 进行调整。确保将相同的值应用于悬停中使用的边框底部顶部,以确保白色覆盖区域在鼠标悬停时不可见。


完整代码:是以上两部分的组合,在鼠标移动时水平拆分文本。



  

    
    
  
    Split Effect 
  
    

  

    

        GeeksforGeeks     

  

输出: