数据结构
网络
关系数据库管理系统
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究如何使用 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 属性用于创建剪切区域，该区域用于确定元素的哪个部分将在网页上显示。区域内的部分将显示，而区域外的部分将隐藏。
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 () 属性。
2K+ 阅读量
