如何使用HTML和CSS刪除填滿顏色以變更影像顏色？
- WBOY轉載
- 2023-09-10 16:49:061115瀏覽
在 Web 開發領域，了解最新的 CSS 和 HTML 技術對於為網站添加令人驚嘆的視覺效果至關重要。其中一種效果是“顏色下降效果”，它允許您透過在圖像上放置填充顏色來更改懸停時圖像的顏色。
透過這種效果，您可以讓您的網站對訪客更具互動性和吸引力。在本文中，我們將引導您完成使用 HTML 和 CSS 建立色彩下降效果的過程。因此，無論您是初學者還是經驗豐富的 Web 開發人員，請繼續關注以了解這種令人興奮的視覺效果。
什麼是Drop Fill Color Effect？
下墜填滿色彩效果是一種使用HTML和CSS套用於影像或圖形的視覺效果，當滑鼠懸停在影像上時，影像上會出現一滴顏色，導致影像改變顏色。
此效果營造了一種色彩滴落在影像上並在其上擴散的幻覺，創造齣戲劇性和動態的效果。這種效果可以用於為網站增加互動性和視覺吸引力，使用戶更加參與其中。
為了實現這種效果，我們必須使用某些屬性，讓我們逐一查看它們 -
Filter 屬性 - CSS 中的 filter 屬性用於將視覺效果套用到元素的內容。它允許您使用各種濾鏡功能調整影像和其他圖形元素的外觀。
clip-path屬性 − clip-path CSS屬性用於建立剪輯路徑，即非矩形區域，定義元素的可見區域。此屬性用於隱藏超出剪輯路徑範圍的元素部分，實現先前只能透過影像遮罩或SVG實現的複雜形狀和效果。
::before 偽元素 − CSS 中的 ::before 偽元素創造一個在元素內容之前插入的偽元素。它用於在元素之前插入內容，而無需添加任何額外的 HTML 標記。
filter 屬性可以採用一個或多個依序套用的篩選函數。有許多不同的濾鏡功能可用，每個功能都應用不同類型的視覺效果。
::before 偽元素的一個常見用途是在元素之前添加裝飾內容，例如圖示或形狀。 ::before 偽元素也可以用於添加文字、背景圖像和其他內容。
應遵循的步驟
以下是在此範例中所採取的步驟 -
步驟1 - 使用.icon-container div來建立一個圖示/圖片的容器。將頁面上的所有元素套用box-sizing: border-box，並將所有元素的邊距和內邊距設為0。
第2 步驟 - 然後將body 元素設定為display: flex 以及justify-content: center 和align-items: center 將容器元素在頁面上垂直和水平置中。 body 元素的背景顏色設定為深灰色(#333)。
步驟 3 − 接下來，我們需要為具有顏色下墜效果的容器元素新增樣式。它被賦予了相對定位，寬度和高度為200像素，並且有一個居中且覆蓋整個容器元素的背景圖像。
第四步 - 然後，我們在懸停時創建顏色下降效果。使用::before偽元素創建一個白色圓圈，懸停時將被剪裁以顯示底層的背景圖片。
filter屬性用於將背景圖像設定為灰階（即黑色和白色），cursor屬性設定為pointer b> 向使用者表明該元素是可點擊的。
clip-path 屬性設定為circle(0% at 50% 0%) 以半徑為0% 的剪切圓開始（即，無可見區域），位於容器元素的中心頂部。
當滑鼠懸停在元素上時，clip-path屬性過渡到circle(100% at 50% 0%)，這將建立一個覆蓋整個容器元素的圓形。此過渡動畫持續時間為0.4秒，使用ease-out的時間函數。
範例
讓我們看一下例子 -
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title> Color Drop Effect </title>
<style>
/* Resetting default styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* Centering the container */
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #333;
}
/* Creating the color drop effect */
.icon-container {
position: relative;
width: 200px;
height: 200px;
background-image: url('https://via.placeholder.com/200');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
filter: grayscale(100%);
cursor: pointer;
}
.icon-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.7);
clip-path: circle(0% at 50% 0%);
transition: clip-path 0.4s ease-out;
}
.icon-container:hover::before {
clip-path: circle(100% at 50% 0%);
}
</style>
</head>
<body>
<div class="icon-container"></div>
</body>
</html>
結論
總之，在 HTML 和 CSS 中使用色彩下降效果可以是一種有趣且富有創意的方式，可以增強網站或 Web 應用程式的視覺吸引力。透過在懸停時更改圖像顏色的功能，您可以添加動態元素來吸引用戶的注意力並使您的內容脫穎而出。
在本文中，我們探討了使用顏色滴落效果改變影像顏色的基本原理。我們涵蓋了使用filter屬性來操作影像的灰度，使用:before偽元素來建立疊加效果，以及使用clip-path屬性來建立在懸停時顯示顏色的圓形遮罩。
透過實施此效果，您可以創造更具吸引力的使用者體驗，並為您的網站增添一些個人化。透過一些實驗和創意，您甚至可以將這種技術推向更高級別，創造出更複雜的顏色滴落效果，從而真正脫穎而出。
以上是如何使用HTML和CSS刪除填滿顏色以變更影像顏色？的詳細內容。更多資訊請關注PHP中文網其他相關文章！