目录
文本水平分割效果
应遵循的步骤
示例
Example
文本分割效果
使用剪辑路径属性
语法
Clip-path Property
Diamond shape polygon
Star Shape Polygon
结论
首页 web前端 css教程 如何使用CSS创建文本分割效果?

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

Sep 13, 2023 am 10:33 AM

如何使用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元素。相应地设置容器的样式。

  • 在节元素内创建一个 div 元素。在其中创建两个 p 元素。根据您的喜好定位和风格。这些 p 元素包含要拆分的文本。文本将在每个 p 元素中写入一次。

  • 使用clip-path属性为文本赋予形状。然后,使用转换属性来翻译悬停时的文本。

示例

<!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>
登录后复制

使用剪辑路径属性

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

剪切路径多边形 () 值是基本几何中可用的形状之一。它使我们能够操作多组不同的 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 id="Clip-path-Property">Clip-path Property</h3>
      <img  src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo" alt="如何使用CSS创建文本分割效果?" >
      <h4 id="Diamond-shape-polygon"> Diamond shape polygon </h4>
      <img  src= "https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" class= "demo1" alt="如何使用CSS创建文本分割效果?" >
      <h4 id="Star-Shape-Polygon">Star Shape Polygon</h4>
   </center>
</body>
</html>
登录后复制

结论

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

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

以上是如何使用CSS创建文本分割效果?的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.最佳图形设置
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O.如果您听不到任何人,如何修复音频
4 周前 By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25:如何解锁Myrise中的所有内容
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

使您的第一个自定义苗条过渡 使您的第一个自定义苗条过渡 Mar 15, 2025 am 11:08 AM

Svelte Transition API提供了一种使组件输入或离开文档(包括自定义Svelte Transitions)时动画组件的方法。

使用GraphQL缓存 使用GraphQL缓存 Mar 19, 2025 am 09:36 AM

如果您最近开始使用GraphQL或审查了其优点和缺点,那么您毫无疑问听到了诸如“ GraphQl不支持缓存”或

展示,不要说 展示,不要说 Mar 16, 2025 am 11:49 AM

您花多少时间为网站设计内容演示文稿?当您撰写新的博客文章或创建新页面时,您是在考虑

使用Redwood.js和Fauna构建以太坊应用 使用Redwood.js和Fauna构建以太坊应用 Mar 28, 2025 am 09:18 AM

随着最近比特币价格超过20k美元的攀升,最近打破了3万美元,我认为值得深入研究创建以太坊

用高架创建自己的野蛮人 用高架创建自己的野蛮人 Mar 18, 2025 am 11:23 AM

无论您是开发人员的哪个阶段,我们完成的任务(无论大小)都会对我们的个人和专业成长产生巨大影响。

VUE 3 VUE 3 Apr 02, 2025 pm 06:32 PM

它的出局!恭喜Vue团队完成了完成,我知道这是一项巨大的努力,而且很长时间。所有新文档也是如此。

在CI/CD上有点 在CI/CD上有点 Apr 02, 2025 pm 06:21 PM

我说的“网站”比“移动应用程序”更合适,但我喜欢Max Lynch的框架:

让我们使用(x,x,x,x)来谈论特殊性 让我们使用(x,x,x,x)来谈论特殊性 Mar 24, 2025 am 10:37 AM

前几天我只是和埃里克·迈耶(Eric Meyer)聊天,我想起了我成长时代的埃里克·迈耶(Eric Meyer)的故事。我写了一篇有关CSS特异性的博客文章,以及

See all articles