CSS小技巧 讓圖片灰度值由80%變為100%並且自動循環呈現
要創建一個圖像逐漸從80%灰度變為100%灰度，然後再從100%灰度變回80%灰度，並且不斷循環的效果，可以使用CSS關鍵幀動畫來實現這個效果。
以下是一個示例代碼：
HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>灰度動畫</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="image-container">
<img src="your-image.jpg" alt="Your Image" class="grayscale-image">
</div>
</body>
</html>CSS（styles.css）：
.image-container {
width: 300px; /* 圖像容器的寬度 */
height: 200px; /* 圖像容器的高度 */
overflow: hidden; /* 隱藏圖像溢出 */
display: flex;
justify-content: center;
align-items: center;
}
.grayscale-image {
width: 100%; /* 圖像寬度佔據容器的100% */
height: 100%; /* 圖像高度佔據容器的100% */
animation: grayscaleAnimation 4s linear infinite alternate; /* 灰度動畫 */
}
@keyframes grayscaleAnimation {
0% {
filter: grayscale(80%); /* 初始灰度值 */
}
100% {
filter: grayscale(100%); /* 最終灰度值 */
}
}在這個示例中：
我們將圖像放置在一個名為image-container的容器內，容器具有固定的寬度和高度，並使用overflow: hidden;來隱藏圖像的溢出部分。
圖像本身被設置為width: 100%;和height: 100%;以確保它佔據整個容器的大小。
我們使用CSS關鍵幀動畫@keyframes來定義灰度動畫。在動畫中，圖像的灰度從80%變為100%，然後再變回80%。
動畫具有4s的持續時間，linear的時間函數，並且使用infinite alternate選項來實現無限循環以及來回變化。
您可以將示例代碼中的元素的src屬性替換為您要使用的圖像的路徑，然後根據需要調整容器的寬度、高度、動畫持續時間以及初始和最終灰度值來獲得所需的效果。
如果您希望圖像從80%灰度逐漸恢復到原始的彩色，然後再循環這個過程，可以稍微修改CSS動畫的關鍵幀。
CSS（styles.css）：
.image-container {
width: 300px; /* 圖像容器的寬度 */
height: 200px; /* 圖像容器的高度 */
overflow: hidden; /* 隱藏圖像溢出 */
display: flex;
justify-content: center;
align-items: center;
}
.grayscale-image {
width: 100%; /* 圖像寬度佔據容器的100% */
height: 100%; /* 圖像高度佔據容器的100% */
animation: grayscaleAnimation 4s linear infinite; /* 灰度動畫 */
}
@keyframes grayscaleAnimation {
0% {
filter: grayscale(80%); /* 初始灰度值 */
}
50% {
filter: grayscale(0%); /* 彩色 */
}
100% {
filter: grayscale(80%); /* 再次變為80%灰度 */
}
}在這個示例中，我們修改了關鍵幀動畫@keyframes，以在動畫的中間階段（50%）將圖像從80%灰度恢復到彩色，然後再回到80%灰度。這樣就實現了從80%灰度到彩色再到80%灰度的循環效果。
您可以將示例代碼中的元素的src屬性替換為您要使用的圖像的路徑，然後根據需要調整容器的寬度、高度和動畫持續時間以獲得所需的效果。
要實現具有呼吸效果速度的循環效果，您可以通過修改CSS動畫的@keyframes關鍵幀來控制動畫的速度。以下是一個示例代碼，演示如何實現具有呼吸效果速度的循環灰度動畫：
CSS（styles.css）：
.image-container {
width: 300px; /* 圖像容器的寬度 */
height: 200px; /* 圖像容器的高度 */
overflow: hidden; /* 隱藏圖像溢出 */
display: flex;
justify-content: center;
align-items: center;
}
.breathing-image {
width: 100%; /* 圖像寬度佔據容器的100% */
height: 100%; /* 圖像高度佔據容器的100% */
animation: breathingAnimation 3s ease-in-out infinite; /* 呼吸效果動畫 */
}
@keyframes breathingAnimation {
0% {
filter: grayscale(80%); /* 初始灰度值 */
transform: scale(1);
}
50% {
filter: grayscale(0%); /* 彩色 */
transform: scale(1.1);
}
100% {
filter: grayscale(80%); /* 再次變為80%灰度 */
transform: scale(1);
}
}在這個示例中，我們修改了關鍵幀動畫@keyframes，以在動畫的中間階段（50%）將圖像從80%灰度恢復到彩色，並在同時將圖像放大，然後再回到80%灰度和原始大小。這樣就實現了具有呼吸效果速度的循環效果。
您可以根據需要調整容器的寬度、高度、動畫持續時間以及變換的比例來獲得所需的效果。
