資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究CSS 中滑鼠懸停顯示底部隱藏文字
排版用於網頁設計以吸引使用者，傳達資訊併產生視覺效果。與印刷排版相比，數字排版為網頁設計師提供了更大的流動性和多功能性。它是使用者介面設計中的一個關鍵要素。它有助於構建強大的視覺層次結構，建立網站的整體基調，並取得良好的審美平衡。
除了提高可讀性和可訪問性之外，排版還應用於啟發使用者。在本文中，我們將討論如何建立一種效果，使文字的底部一半隱藏，並在游標懸停在其上時顯示出來。
使用的屬性
以下是我們在示例中使用的屬性 -
clip-path 屬性 - clip-path CSS 屬性用於建立剪輯路徑，剪輯路徑是一個非矩形區域，定義元素的可見區域。該屬性用於隱藏落在剪輯路徑外部的元素部分，從而實現以前只能透過影像蒙版或 SVG 實現的複雜形狀和效果。
CSS transition 屬性 - transition CSS 屬性用於在不同的 CSS 樣式或屬性值之間建立平滑的動畫過渡。當 transition 應用於元素時，它指定過渡的持續時間、時間函式、延遲以及正在過渡的屬性或屬性。此屬性可以應用於各種 CSS 屬性，包括背景顏色、不透明度、變換等等。
HTML 示例
我們從一個簡單的 HTML 結構開始，該結構包含一個容器元素和一個 hidden-text div。容器元素只是 hidden-text div 和文字“將滑鼠懸停在此文字上以顯示它”的包裝器。
容器元素的 position 為 relative，這是絕對定位的 hidden-text div 相對它進行定位所必需的。hidden-text div 的 position 為 absolute，這允許我們將它定位在容器元素的頂部。
hidden-text div 的 top、left、right 和 bottom 均為 0，這將其定位在容器元素的左上角，並將其拉伸以覆蓋整個容器元素。bottom 設定為 50%，這隱藏了 hidden-text div 的底部一半。
hidden-text div 的 background-color 設定為 white，color 設定為 orange。font-size 設定為 30px，這使文字更大，更易於閱讀。text-align 設定為 center，這將文字水平居中。line-height 設定為 200%，這增加了文字行之間的垂直間距。
clip-path 屬性設定為一個隱藏 hidden-text div 底部一半的多邊形。它包含四個定義矩形的點：0 0（左上）、100% 0（右上）、100% 100%（右下）和 0% 100%（左下）。
transition 屬性用於在 JavaScript 中更改 clip-path 時建立平滑的過渡。
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
</head>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
JavaScript 示例
以下是 JavaScript 程式碼 -
此程式碼在 .container 元素的 mousemove 事件上設定了一個事件監聽器。當用戶在容器內移動滑鼠時，將執行事件監聽器回撥函式。
在回撥函式內部，程式碼選擇 .hidden-text 元素，該元素是我們想要在滑鼠懸停時顯示的元素。然後，使用 polygon() 函式建立一個名為 clipPath 的變數以定義剪輯路徑的形狀。
使用四個座標定義多邊形，這些座標表示剪輯路徑的四個角。前兩個座標始終為 0 0，表示元素的左上角。第三個座標 100% ${100 - e.clientY / window.innerHeight * 100}%，表示剪輯路徑的右下角。
第四個座標為 0% ${100 - e.clientY / window.innerHeight * 100}%，表示剪輯路徑的左下角。0% 指示元素的左邊緣，100 - e.clientY / window.innerHeight * 100 計算滑鼠相對於元素高度的垂直位置。
100% 指示元素的右邊緣，100 - e.clientY / window.innerHeight * 100 計算滑鼠相對於元素高度的垂直位置，並將其從 100 中減去，以確保剪輯路徑從元素底部向上增長。
最後，.hidden-text 元素的 style.clipPath 屬性設定為 clipPath 變數，這將剪輯路徑應用於元素，並在滑鼠向上移動時顯示文字的底部一半。
JavaScript 程式碼向容器元素添加了一個事件監聽器，以偵聽滑鼠移動事件。當滑鼠移到容器上時，hidden-text div 的 clip-path 會根據滑鼠位置動態更改。
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
示例
以下是完整的示例 -
<!DOCTYPE html>
<html>
<head>
<title> Mouse hover effects on text </title>
</head>
<style>
body {
background-color: cyan;
margin: 10px;
padding: 5px;
}
.container {
position: relative;
}
.hidden-text {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
font-size: 30px;
font-family: algerian;
color: orange;
background-color: white;
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
.container:hover .hidden-text {
opacity: 1;
clip-path: circle(0 at 0 0);
}
</style>
<script>
const container = document.querySelector('.container');
container.addEventListener('mousemove', (e) => {
const hiddenText = document.querySelector('.hidden-text');
hiddenText.style.clipPath = `circle(50px at ${e.offsetX}px ${e.offsetY}px)`;
});
</script>
<body>
<div class="container">
<div class="hidden-text">This is the hidden text. </div>
<h1> Hover over this text to reveal it with a circular mask. </h1>
</div>
</body>
</html>
結論
使用 clip-path 屬性時，務必確保要剪輯的元素具有定義的寬度和高度，否則剪輯路徑可能無法按預期工作。此外，該屬性可能在舊版瀏覽器中不受完全支援，因此務必進行徹底測試並在必要時提供備用樣式。
363 次瀏覽
