How to create a text split effect using 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="How to create a text split effect using 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="How to create a text split effect using CSS?" >
<h4 id="Star-Shape-Polygon">Star Shape Polygon</h4>
</center>
</body>
</html>
结论
网页设计中可用性更重要的元素之一是可读性。用户应该能够轻松阅读和理解您的材料。如果您的网站的文本内容是独特的，那么该网站受欢迎的机会就很高。这是因为文本是最常见的元素之一，在大多数网站中都显得平淡无奇。因此，为了吸引用户的注意力，开发人员可以尝试不同的、独特的文字写作风格。其中之一是分割文本效果。
在本文中，我们讨论了在网页中的文本上创建分割效果的不同方法。为了创建水平分割，我们使用了 :before 和 :after 伪选择器。为了创建各种形状的分割，我们使用了CSS的clip-path Polygon ()属性。
The above is the detailed content of How to create a text split effect using CSS?. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
AI Hentai Generator
Generate AI Hentai for free.
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Demystifying Screen Readers: Accessible Forms & Best Practices
Mar 08, 2025 am 09:45 AM
This is the 3rd post in a small series we did on form accessibility. If you missed the second post, check out "Managing User Focus with :focus-visible". In
Create a JavaScript Contact Form With the Smart Forms Framework
Mar 07, 2025 am 11:33 AM
This tutorial demonstrates creating professional-looking JavaScript forms using the Smart Forms framework (note: no longer available). While the framework itself is unavailable, the principles and techniques remain relevant for other form builders.
Adding Box Shadows to WordPress Blocks and Elements
Mar 09, 2025 pm 12:53 PM
The CSS box-shadow and outline properties gained theme.json support in WordPress 6.1. Let's look at a few examples of how it works in real themes, and what options we have to apply these styles to WordPress blocks and elements.
Working With GraphQL Caching
Mar 19, 2025 am 09:36 AM
If you’ve recently started working with GraphQL, or reviewed its pros and cons, you’ve no doubt heard things like “GraphQL doesn’t support caching” or
Making Your First Custom Svelte Transition
Mar 15, 2025 am 11:08 AM
The Svelte transition API provides a way to animate components when they enter or leave the document, including custom Svelte transitions.
Show, Don't Tell
Mar 16, 2025 am 11:49 AM
How much time do you spend designing the content presentation for your websites? When you write a new blog post or create a new page, are you thinking about
Classy and Cool Custom CSS Scrollbars: A Showcase
Mar 10, 2025 am 11:37 AM
In this article we will be diving into the world of scrollbars. I know, it doesn’t sound too glamorous, but trust me, a well-designed page goes hand-in-hand
What the Heck Are npm Commands?
Mar 15, 2025 am 11:36 AM
npm commands run various tasks for you, either as a one-off or a continuously running process for things like starting a server or compiling code.
