CSS3過渡創建漂亮的淡化效果
Web設計人員長期以來希望能夠更好地控制CSS3在現場創建時所創建的頁面。 CSS3中引入的新風格使Web專業人員能夠將類似Photoshop的效果添加到他們的頁面中。 這包括諸如陰影和發光 ，圓角等屬性。 CSS3還引入了動畫效果，可用於在網站上創建良好的交互性。
使用CSS3可以添加到網站元素中的一種非常好的視覺效果是使用混合和透明屬性的組合來淡入淡出。 這是一種簡單且有效的方式，通過創建褪色的區域，讓網頁更具互動性，這些區域在網站訪問者執行某些操作時（例如懸停在該元素上）時會變得焦點集中。
讓我們來看看將這種交互式視覺效果添加到網頁上的各種元素是多麼容易。
讓我們改變懸停的不透明度
當客戶將鼠標懸停在該元素上時，我們將著眼於如何更改圖像的不透明度。 對於這個例子（HTML如下所示）我使用了一個具有greydout類屬性的圖像。
為了使它變灰，我們將下面的樣式規則添加到我們的CSS樣式表中：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
這些不透明度設置轉化為25％。 這意味著圖像將顯示為正常透明度的1/4。 完全不透明，不透明度為100％，而0％則完全透明。
接下來，當鼠標懸停在圖像上時，為了使圖像清晰（或更準確地說，變得完全不透明），您可以添加：hover偽類：
.greydout：hover {
-webkit-opacity：1;
-moz-opacity：1;
不透明度：1;
}
您會注意到，對於這些示例，我使用規則的供應商前綴版本來確保這些瀏覽器的舊版本具有向後兼容性。 雖然這是一個很好的做法，但實際情況是，不透明規則現在得到瀏覽器的很好支持，並且放棄這些供應商前綴行是非常安全的。 不過，如果您想確保支持較舊的瀏覽器版本，也沒有理由不包含這些前綴。 只要確保遵循公認的最佳做法，即以正常，未加前綴的風格版本結束聲明。
如果您在網站上部署了此功能，您會發現這種不透明度調整是非常突然的變化。 首先它是灰色的，然後不是，兩者之間沒有臨時狀態。 它就像一個燈開關 - 打開或關閉。 這可能是你想要的，但你也可能想嘗試一個更漸進的改變。
要添加一個非常好的效果並逐漸淡化，您需要將轉換屬性添加到.greydout類中：
.greydout {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
-webkit-transition：所有3s緩解;
-moz-transition：所有3s緩解;
-ms-transition：全部3s緩解;
-o-transition：所有3s緩解;
過渡：所有3s緩解;
}
通過這些代碼，變化將逐漸過渡，而不僅僅是突然切換。
再一次，我們在這裡使用了一些供應商前綴規則。 Transition不如透明度支持，所以這些前綴確實有意義。
在您規劃這些交互時，需要記住的一件事是觸摸屏設備沒有“懸停”狀態，因此使用觸摸屏設備（如手機）的任何人都會失去這些效果。 過渡往往會發生，但發生得如此之快以至於無法看到。 如果您將此添加為不錯的獎勵效果，那很好，但請避免任何需要了解內容的變化。
淡出也是可能的
您不必從褪色的圖像開始，您可以使用轉場和不透明度從完全不透明的圖像中淡出。 使用相同的圖像，只使用withfadeout類：
類=“withfadeout”>
就像以前一樣，您可以使用：hover選擇器更改不透明度：
.withfadeout {
-webkit-transition：所有2s進出;
-moz-transition：全部2s緩和;
-ms-transition：全部2s緩和;
-o-transition：全部2s緩和;
過渡：全部2s緩和;
}
.withfadeout：hover {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
}
在這個例子中，圖像將從完全不透明轉變為稍微透明 - 與第一個例子相反。
超越圖像
您可以將這些視覺過渡和淡入淡出應用於圖像，這一點非常好，但您不僅限於僅使用具有這些CSS效果的圖像。 您可以輕鬆製作CSS樣式的按鈕，單擊並保持時會淡入淡出。 您只需使用：active偽類設置不透明度，並將該過渡置於定義該按鈕的類上。 點擊並按住此按鈕查看會發生什麼。
可以使任何視覺元素在盤旋或點擊時褪色。 在這個例子中，當鼠標懸停時，我改變div的不透明度和文本的顏色。 這裡是CSS：
#myDiv {
寬度：280px;
背景顏色：＃557A47;
顏色：#dfdfdf;
填充：10px;
-webkit-transition：所有4s緩解0;
-moz-transition：所有4s緩解0;
-ms-transition：所有4s緩解0;
-o-transition：所有4s緩解0;
過渡：所有4s緩解0;
}
#myDiv：hover {
-webkit-opacity：0.25;
-moz-opacity：0.25;
不透明度：0.25;
顏色：＃000;
}
導航菜單可以從衰落背景顏色中受益
在這個簡單的導航菜單中，當我將鼠標懸停在菜單項上時，背景顏色會慢慢地淡入淡出。 這是HTML：
- 家
- CSS3教程
- CSS3屬性
這裡是CSS：
ul＃sampleNav {list-style：none; }
ul＃sampleNav li {
顯示：內聯;
向左飄浮;
填充：5px 15px;
保證金：0 5px;
-webkit轉換：所有2s線性;
-moz-transition：全2s線性;
-ms-transition：所有2s線性;
-o-transition：全2s線性;
過渡：全2s線性;
}
ul＃sampleNav li a {text-decoration：none; }
ul＃sampleNav li：hover {
背景顏色：＃DAF197;
}
瀏覽器支持
正如我已經談過幾次，這些樣式具有非常好的瀏覽器支持，所以您應該隨時使用它們而不會感到任何不安。 唯一的例外是Internet Explorer的舊版本，但由於微軟最近決定終止對11以下所有IE版本的支持，這些舊版本的瀏覽器越來越成為一個問題 - 實際上，如果舊瀏覽器不看到這個淡入淡出的過渡，那應該不是什麼大問題。 只要您將這些類型的效果限制在愉快的互動中，而不是依靠它們來驅動功能或揭示關鍵內容，那麼不支持效果的舊瀏覽器就會獲得不太愉快的體驗，但這些瀏覽器中的用戶甚至不會了解它們之間的差異，特別是如果他們可以正常使用該網站並獲取他們所需的信息。
額外的樂趣;交換兩個圖像
以下是如何將一幅圖像淡入另一幅圖像的示例。 使用HTML：
而CSS使一個完全透明，而另一個完全不透明，然後過渡交換兩個：
.swapMe img {-webkit-transition：全部1s緩和; -moz-transition：全部1s緩和; -ms-transition：全部1s緩和; -o-transition：所有1s緩和; 過渡：所有1s緩和; } .swap1，.swapMe：hover .swap2 {-webkit-opacity：1; -moz-opacity：1; 不透明度：1; } .swapMe：hover .swap1，.swap2 {-webkit-opacity：0; -moz-opacity：0; 不透明度：0; }