CSS 如何创建文本分割效果

CSS 如何创建文本分割效果

既美观又吸引人的网页设计从未像现在这样有价值。有许多网站可能在视觉上很吸引人。它们仍然没有给观众带来有利的影响。当访问者到达你的网站时,他们注意到的第一件事就是你的网站的外观。排版是书面文字的视觉表现。它包含了诸如字距和字母设计等元素。

在网站设计中,字体不仅仅是字母。你的网站的外观会发生变化,就像你改变字体颜色时一样。给文本创造不同的效果,如分割,将给观众创造一个巨大的视觉冲击。

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

文本的水平分割效果

当光标悬停在文本上时,文本被分割,这被称为分割效果。使用:before和:after伪选择器以及悬停选择器来完成文本的水平分割。

  • **:before”伪选择器– **用于在一个元素的内容之前插入一些东西。

  • **:after” 伪选择器– **用于在一个元素的内容之后插入一些东西。内容属性指定了要写在所选元素之后或之前的内容。

  • **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元素内创建一个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属性用于创建剪切区域,该区域用于决定元素的哪一部分将在网页上显示。在该区域内的部分将被显示,而在该区域外的部分则被隐藏。

Clip-path polygon()值是基本几何学中可用的形状之一。它使我们能够操作X轴和Y轴的几组不同的值(以任何单位)。

语法

element{
   clip-path: polygon (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>

结论

在网页设计中,可用性的一个比较关键的因素是可读性。用户应该能够轻松地阅读和理解你的材料。如果你的网站的文字内容是独特的,那么网站受欢迎的机会就会很大。这是因为文本是最常见的元素之一,在大多数网站中都是平淡无奇的。因此,为了抓住用户的注意力,开发人员可以尝试不同的和独特的文本写作风格。其中之一就是分割文本效果。

在这篇文章中,我们已经讨论了在网页中创建文本分割效果的不同方法。对于创建水平分割,我们使用了 :before:after 伪选择器。为了创建各种形状的分割,我们使用了CSS的 clip-path polygon() 属性。

Python教程

Java教程

Web教程

数据库教程

图形图像教程

大数据教程

开发工具教程

计算机教程

CSS 教程