既美觀又引人入勝的網(wǎng)頁(yè)設(shè)計(jì)從未如此有價(jià)值。有許多網(wǎng)站可能看起來(lái)很有吸引力。他們?nèi)匀粵](méi)有對(duì)觀眾產(chǎn)生有利的影響。當(dāng)訪問(wèn)者到達(dá)您的網(wǎng)站時(shí)，他們首先注意到的是您網(wǎng)站的外觀。版式是書(shū)面文本的視覺(jué)表示。它包含字距調(diào)整和字母設(shè)計(jì)等元素。
在網(wǎng)站設(shè)計(jì)中，字體不僅僅是字母。您網(wǎng)站的外觀會(huì)發(fā)生變化，就像您更改字體顏色時(shí)一樣。創(chuàng)建不同的效果（例如分割文本）會(huì)給觀眾帶來(lái)巨大的視覺(jué)沖擊。
CSS提供了各種功能和對(duì)HTML元素的過(guò)渡，如動(dòng)畫(huà)、懸停效果、霓虹燈效果等，因此，我們將使用這些屬性來(lái)創(chuàng)建文本分割效果。在這篇文章中，我們將討論如何使用 CSS 創(chuàng)建分割文本效果。
文本水平分割效果
當(dāng)光標(biāo)懸停在文本上時(shí)分割文本，稱為分割效果。水平分割文本將使用 :before 和 :after 偽選擇器以及懸停選擇器來(lái)完成。
“:before”偽選擇器 – 用于在元素內(nèi)容之前插入某些內(nèi)容。
“:after”偽選擇器 – 用于在元素內(nèi)容之后插入內(nèi)容。 content 屬性指定要在選定元素之后或之前寫(xiě)入的內(nèi)容
“z-index”屬性 – 當(dāng)存在重疊元素時(shí)，它們出現(xiàn)在堆棧中。因此，為了決定哪個(gè)元素將出現(xiàn)在堆棧頂部，我們給它一個(gè)更大的 z-index。
值可以是 1、2、3…。如果您想將該元素保留在另一個(gè)元素下方，則其值可以為負(fù)數(shù)。因此，您只需分配一個(gè)較低的 z-index 值
應(yīng)遵循的步驟
編寫(xiě)文本并將其放在中心并設(shè)置樣式。
使用:before選擇器，將文本的前半部分（上半部分）設(shè)置為灰色。
使用:after選擇器，覆蓋灰色內(nèi)容。
為每個(gè)選擇器提供 z-index，以便事件順序有序。
將鼠標(biāo)懸停在文本上即可發(fā)現(xiàn)內(nèi)容，從而產(chǎn)生水平分割效果。
示例
<!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>
登錄后復(fù)制
文本分割效果
現(xiàn)在我們來(lái)討論一下如何創(chuàng)建文本垂直分割的效果。
應(yīng)遵循的步驟
創(chuàng)建一個(gè)class=“container”的section元素。相應(yīng)地設(shè)置容器的樣式。
在節(jié)元素內(nèi)創(chuàng)建一個(gè) div 元素。在其中創(chuàng)建兩個(gè) p 元素。根據(jù)您的喜好定位和風(fēng)格。這些 p 元素包含要拆分的文本。文本將在每個(gè) p 元素中寫(xiě)入一次。
使用clip-path屬性為文本賦予形狀。然后，使用轉(zhuǎn)換屬性來(lái)翻譯懸停時(shí)的文本。
示例
<!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>
登錄后復(fù)制
使用剪輯路徑屬性
CSS的clip-path屬性用于創(chuàng)建剪切區(qū)域，該區(qū)域用于確定元素的哪一部分將顯示在網(wǎng)頁(yè)上。區(qū)域內(nèi)的部分將被顯示，而區(qū)域外的部分將被隱藏。
剪切路徑多邊形 () 值是基本幾何中可用的形狀之一。它使我們能夠操作多組不同的 x 軸和 y 軸值（任何單位）。
語(yǔ)法
element{
clip-path: polygon (x y, x y, x y);
}
登錄后復(fù)制
我們可以借助下面的例子來(lái)理解這個(gè)屬性。
示例
<!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>
登錄后復(fù)制
結(jié)論
網(wǎng)頁(yè)設(shè)計(jì)中可用性更重要的元素之一是可讀性。用戶應(yīng)該能夠輕松閱讀和理解您的材料。如果您的網(wǎng)站的文本內(nèi)容是獨(dú)特的，那么該網(wǎng)站受歡迎的機(jī)會(huì)就很高。這是因?yàn)槲谋臼亲畛Ｒ?jiàn)的元素之一，在大多數(shù)網(wǎng)站中都顯得平淡無(wú)奇。因此，為了吸引用戶的注意力，開(kāi)發(fā)人員可以嘗試不同的、獨(dú)特的文字寫(xiě)作風(fēng)格。其中之一是分割文本效果。
在本文中，我們討論了在網(wǎng)頁(yè)中的文本上創(chuàng)建分割效果的不同方法。為了創(chuàng)建水平分割，我們使用了 :before 和 :after 偽選擇器。為了創(chuàng)建各種形狀的分割，我們使用了CSS的clip-path Polygon ()屬性。
以上就是如何使用CSS創(chuàng)建文本分割效果？的詳細(xì)內(nèi)容，更多請(qǐng)關(guān)注www.92cms.cn其它相關(guān)文章！
