資料結構
網路
關係資料庫管理系統
作業系統
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+ 閱讀量
