如何使用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中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
使您的第一個自定義苗條過渡
Mar 15, 2025 am 11:08 AM
Svelte Transition API提供了一種使組件輸入或離開文檔（包括自定義Svelte Transitions）時動畫組件的方法。
您如何使用CSS創建文本效果，例如文本陰影和漸變？
Mar 14, 2025 am 11:10 AM
文章討論了使用CSS來獲得陰影和漸變等文本效果，優化它們以進行性能並增強用戶體驗。它還列出了初學者的資源。（159個字符）
