如何使用 CSS 创建文本拆分效果?

美观且引人入胜的网页设计从未如此重要。许多网站可能看起来很有视觉吸引力，但它们仍然没有给观众留下良好的印象。当访客访问您的网站时，他们首先注意到的是您网站的外观。排版是书面文本的视觉呈现。它包含字距调整和字母设计等元素。

在网站设计中，字体不仅仅是字母。您的网站外观会发生变化，就像您更改字体颜色时一样。创建不同的效果，例如文本拆分，将给观众带来巨大的视觉冲击。

CSS 为 HTML 元素提供了各种功能和过渡，例如动画、悬停效果、霓虹灯效果等。因此，我们将使用这些属性来创建文本拆分效果。在本文中，我们将讨论如何使用 CSS 创建文本拆分效果。

文本水平分割效果

当光标悬停在文本上时，文本会被分割，这被称为分割效果。水平分割文本可以使用:before和:after伪选择器以及悬停选择器来实现。

• ":before"伪选择器 − 用于在元素内容之前插入内容。

• ":after"伪选择器 − 用于在元素内容之后插入内容。content属性指定要在选定元素之后或之前写入的内容。

• "z-index"属性 − 当元素重叠时，它们会以堆叠的形式显示。因此，为了确定哪个元素将出现在堆栈顶部，我们赋予它一个更大的 z-index。

值可以是 1、2、3……。如果要使元素位于另一个元素下方，其值可以为负数。因此，您只需分配一个较低的 z-index 值即可。

步骤如下

• 编写一段文本，将其置于中心位置并设置样式。

• 使用 :before 选择器，将文本的前半部分(上半部分)设为灰色。

• 使用 :after 选择器，覆盖灰色内容。

• 为每个选择器分配 z-index，以确保事件顺序正确。

• 将鼠标悬停在文本上时，内容会显露出来，从而产生水平分割效果。

示例

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title>Split Horizontal Effect</title>
   <style>
      body{
         margin: 10px;
         padding: 0;
         font-family: verdana, Helvetica, arial;
         letter-spacing: 1px;
      }
      #Example {
         position: absolute;
         top: 50%;
         left: 38%;
         font-size: 60px;
         z-index: -1;
         color: red;
      }
      #Example::before {
         content: attr(id);
         position: absolute;
         height: 60%;
         color: gray;
         z-index: 1;
         top: 4px;
         left: 1px;
         overflow: hidden;
      }
      #Example::after {
         content: attr(id);
         position: absolute;
         height: 60%;
         top: 0;
         left: 0;
         overflow: hidden;
         color: red;
         border-bottom: 1px solid white;
         z-index: 2;
         transition: 1s;
      }
      #Example:hover::after {
         border-bottom: 4px solid white;
         top: -7px;
         overflow: hidden;
      }
   </style>
</head>
<body>
   <h1 id= "Example"> Example </h1>
</body>
</html>

文本的拆分效果

现在，我们将讨论如何在文本上创建垂直拆分效果。

步骤

• 创建一个 class="container"的 section 元素。并相应地设置容器的样式。

• 在 section 元素内创建一个 div 元素。在其中创建两个 p 元素。根据您的偏好设置位置和样式。这两个 p 元素包含要拆分的文本。文本将在每个 p 元素中写入一次。

• 使用 clip-path 属性为文本赋予形状。然后，使用 transform 属性在鼠标悬停时平移文本。

示例

<!DOCTYPE html>
<html>
<head>
   <meta charset= "UTF-8">
   <title> Split effect </title>
   <style>
      .container {
         position: absolute;
         transform: translate(-50%, -50%);
         top: 35%;
         left: 40%;
         color: cyan;
      }
      .demo {
         position: absolute;
         text-transform: uppercase;
         font-size: 50px;
         letter-spacing: 1px;
         transition: 4s ease-in;
      }
      .demo1 {
         clip-path: polygon (0 10%, 30% 0, 100% 0, 100% 0%, 50% 0, 0 100%);
      }
      .demo2 {
         clip-path: polygon (0 100%, 50% 0, 100% 100%, 100% 100%, 0 100%, 47% 0);
      }
      .box:hover .demo1 {
         transform: translateY(-30px);
      }
      .box:hover .demo2 {
         transform: translateY(20px);
      }
   </style>
</head>
<body>
   <section class= "container">
      <div class= "box">
         <p class= "demo demo1"> Example </p>
         <p class= "demo demo2"> Example </p>
      </div>
   </section>
</body>
</html>

使用 clip-path 属性

CSS 的 clip-path 属性 用于创建剪切区域，该区域用于确定元素的哪一部分将在网页上显示。区域内的部分将显示，区域外的部分将被隐藏。

element{
    clip-path: poly(x y, x y, x y);
}

<!DOCTYPE html>
<html>
<head>
   <title>Clip-path Property</title>
   <style>
      h3{
         color: red;
         font-size: 30px;
         text-decoration: underline;
      }
      .demo {
         clip-path: polygon(30% 0%, 70% 30%, 50% 80%, 0% 40%);
      }
      .demo1{
         clip-path: polygon(50% 10%, 61% 45%, 98% 30%, 68% 67%, 75% 91%, 48% 70%, 18% 91%, 32% 67%, 4% 45%, 42% 45%);
      }
   </style>
</head>
<body>
   <center>
      <h3>Clip-path Property</h3>
      <img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo">
      <h4> Diamond shape polygon </h4>
      <img src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1">
      <h4>Star Shape Polygon</h4>
   </center>
</body>
</html>