2
我試圖完成與社交分享圖標在我工作的網站上的兩件事。Desaturate和添加投影
首先,我想添加陰影。那麼我想讓它們在默認情況下不飽和,並懸停着色。
下面是我使用的代碼:
.a2a_floating_style.a2a_vertical_style img {
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
-webkit-transition:all .4s;
-moz-transition:all .4s;
-ms-transition:all .4s;
-o-transition:all .4s;
transition:all .4s;
}
.a2a_floating_style.a2a_vertical_style img:not(:hover) {
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
-webkit-filter:grayscale(100%);
-moz-filter:grayscale(100%);
-ms-filter:grayscale(100%);
-o-filter:grayscale(100%);
filter:grayscale(100%);
}
.a2a_floating_style.a2a_vertical_style img:hover {
-webkit-filter: drop-shadow(6px 6px 6px rgba(0,0,0,0.5));
filter: url(#drop-shadow);
-ms-filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
filter: "progid:DXImageTransform.Microsoft.Dropshadow(OffX=6, OffY=6, Color='#444')";
-webkit-filter:grayscale(0%);
-moz-filter:grayscale(0%);
-ms-filter:grayscale(0%);
-o-filter:grayscale(0%);
filter:grayscale(0%);
}
它不飽和位,但沒有陰影。如果我刪除了去飽和指示,那麼它的投影效果很好。
有沒有一種方法,我應該組織這樣做,所以這兩種效果將工作?
謝謝。
謝謝!這正是我需要的。 – CMZ 2014-10-24 18:01:28