CSS圖片倒影效果兼容firefox、IE等各主流瀏覽器

發(fā)布時(shí)間：2012-12-27 17:49:20 作者：佚名

我要評(píng)論

無需flash，完全用css就可以做出超炫的圖片倒影效果,大伙不要不信；網(wǎng)上流傳很多種版本，經(jīng)過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大家分享一下

無需flash，完全用css就可以做出超炫的圖片倒影效果。網(wǎng)上流傳很多種版本，經(jīng)過本人的一番研究，做成能夠兼容firefox、chrome、IE等各主流瀏覽器的版本，跟大家分享一下。最終完成的效果

新瀏覽器的實(shí)現(xiàn)
指的是firefox、chrome和IE9。新瀏覽器都支持CSS3新添的transform屬性，所以實(shí)現(xiàn)倒影效果非常簡單。從下面的代碼看到，各家瀏覽器對(duì)transform的實(shí)現(xiàn)有點(diǎn)不同
-webkit-transform: scaleY(-1); /* webkit內(nèi)核瀏覽器的實(shí)現(xiàn)，例如safari */
-moz-transform: scaleY(-1); /* firefox 的實(shí)現(xiàn) */
-ms-transform: scaleY(-1); /* IE 的實(shí)現(xiàn) */
-o-transform: scaleY(-1); /* Opera的實(shí)現(xiàn) */
HTML

復(fù)制代碼

代碼如下:

CSS

復(fù)制代碼

代碼如下:

body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:alpha(opacity='50');
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}

在倒轉(zhuǎn)的圖片上面還加了一個(gè)DIV.overlay層，做出漸變的效果，使倒影看起來更真實(shí)。
兼容舊瀏覽器的實(shí)現(xiàn)
考慮到還有相當(dāng)多的人在使用舊版瀏覽器，程序員絞盡腦汁為這部分人做兼容。這里指的是IE7/IE8。IE6怎么辦？提示用戶升級(jí)瀏覽器吧。
舊IE不支持transform屬性，可以使用濾鏡 filter:flipv 來生成圖片倒轉(zhuǎn)，但會(huì)跟IE9的transform沖突。所以要用到各種 hack 來解決。修改后的CSS如下，添加了IE9 hack，覆蓋掉上面的filter:flipv的屬性。

復(fù)制代碼

代碼如下:

body{background:#000;color:#f00}
.wrap{position:relative;}
.image{margin-bottom:3px;}
.down{position: relative;}
.reflection{width:421px;height:180px;background:url(1.jpg) bottom center no-repeat;
-webkit-transform: scaleY(-1);
-moz-transform: scaleY(-1);
-ms-transform: scaleY(-1);
-o-transform: scaleY(-1);
transform: scaleY(-1);
opacity:0.5;
filter:flipv alpha(opacity='50'); /*ALL IE*/
}
@media all and (min-width:0) {
.reflection{filter:alpha(opacity='50') \0/;} /*IE9*/
}
.overlay{position: relative;width:421px;height:180px;bottom:149px;
background-image: -moz-linear-gradient(center bottom, rgb(0,0,0) 20%, rgba(0,0,0,0) 90%);
background-image: -o-linear-gradient(rgba(0,0,0,0) 10%, rgb(0,0,0) 30%);
background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(0,0,0)), color-stop(0.90, rgba(0,0,0,0)));
filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#000000);
}

運(yùn)行一下，在各版本的瀏覽器能看到最終的效果了。