使用 CSS 的文本分割效果

在本文中，我们将了解如何使用 CSS 创建文本拆分效果。 HTML 代码用于创建部分的基本结构，CSS 代码用于设置样式。

方法：

• 使用类“容器”创建一个 HTML div 元素。
• 在“container”中，创建一个带有“box”类的 HTML div。
• 创建两个带有文本的 p 标签。
• 为了分割文本，我们将使用 clip-path 提供文本形状，然后在悬停时使用 transform 属性来翻译它。

例子：

HTML

  

    

  

  
    
    

  
        
        

  
            
            
geeksforgeeks
  
            
geeksforgeeks
        
    

  

输出：

参考： https ://www.geeksforgeeks.org/how-to-split-text-horizontally-on-mouse-move-over-using-css/