使用 CSS 的双层文字效果

双层文本效果功能在以动画网站及其用户为受众的文本动画世界中是非常新的。该功能基本上每个单词都有两层，上层可以通过各种事件(例如悬停事件)进行操作。上层的旋转以一定的角度进行，以产生一种铰链效果。看起来上层从一个点连接到下层。

方法：方法是首先使用 before 选择器创建两个图层，然后使用悬停选择器在鼠标悬停时旋转它。

HTML 代码：在本节中，我们将每个字母表包裹在一个具有与字母表相同值的 data-title 属性的跨度中。

  
    
    
    

    

      G
      E
      E
      K
      S
      F
      O
      R
      G
      E
      E
      K
      S
    

  

CSS 代码：

• 第 1 步：执行一些基本样式，如背景、字体系列、字体大小和将文本调整到中心。
• 第 2 步：现在使用before选择器，内容设置为span标签中使用的数据标题。这将创建文本的第二层。确保提供与第一层的颜色不同的颜色。
• 第 3 步：现在使用一些过渡来提供平滑的动画。
• 第 4 步：最后，使用悬停选择器更改视角或简单地说旋转第二层。

注意：请仔细选择度数旋转和过渡值。您可以使用浏览器控制台来获得完美的值。

完整代码：是以上两段代码的组合。

  

    
    
  
    
  
    

  

    

        G
        E
        E
        K
        S
        F
        O
        R
        G
        E
        E
        K
        S
    

  

输出：