CSS照片倒映实际效果适配firefox、IE等各流行访问

2021-03-10 21:55 jianzhan
不用flash,彻底用css便可以做出超炫的照片倒映实际效果。在网上流传许多种版本号,历经自己的1番科学研究,做成可以适配firefox、chrome、IE等各流行访问器的版本号,跟大伙儿共享1下。最后进行的实际效果

新访问器的完成
指的是firefox、chrome和IE9。新访问器都适用CSS3新添的transform特性,因此完成倒映实际效果十分简易。从下面的编码看到,各家访问器对transform的完成有点不一样
-webkit-transform: scaleY(⑴); /* webkit核心访问器的完成,比如safari */
-moz-transform: scaleY(⑴); /* firefox 的完成 */
-ms-transform: scaleY(⑴); /* IE 的完成 */
-o-transform: scaleY(⑴); /* Opera的完成 */
HTML

拷贝编码
编码以下:

<div class="wrap">
<div class="image"><img src="1.jpg" /></div>
<div class="down">
<div class="reflection"></div>
<div class="overlay"></div>
</div>
</div>

CSS

拷贝编码
编码以下:

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(⑴);
-moz-transform: scaleY(⑴);
-ms-transform: scaleY(⑴);
-o-transform: scaleY(⑴);
transform: scaleY(⑴);
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);
}

在倒转的照片上面还加了1个DIV.overlay层,做出渐变色的实际效果,使倒映看起来更真正。
适配旧访问器的完成
考虑到到也有非常多的人在应用旧版访问器,程序流程员煞费苦心为这一部分人做适配。这里指的是IE7/IE8。IE6如何办?提醒客户升級访问器吧。
旧IE不适用transform特性,可使用滤镜 filter:flipv 来转化成照片倒转,但会跟IE9的transform矛盾。因此要用到各种各样 hack 来处理。改动后的CSS以下,加上了IE9 hack,遮盖掉上面的filter:flipv的特性。

拷贝编码
编码以下:

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(⑴);
-moz-transform: scaleY(⑴);
-ms-transform: scaleY(⑴);
-o-transform: scaleY(⑴);
transform: scaleY(⑴);
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);
}

运作1下,在各版本号的访问器能看到最后的实际效果了。