<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#wrapper{width:600px;margin:50px auto;border:1px solid #ccc;}
*{border:none;padding:0;margin:0;}
.reflectionBox{position:relative;_zoom:1;}
.reflectionBox:before{
content: url("http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg");
display: block;
height: 100%;
left: 0;
position: absolute;
top: 100%;
-webkit-transform: rotateX(180deg);
transform: rotateX(180deg);
width: 100%;
z-index: 10;
}
.reflectionBox:after{
content: "";
display: block;
height: 100%;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
background-image: -webkit-linear-gradient(-90deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.8));
}
.refImage,.refGradient{display:none;}
</style>
<!--[if lte IE 9 ]>
<style>
.refImage{
background: url("http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg") no-repeat;
display: block;
height: 100%;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 10;
_height:176px;
_width:228px;
filter: flipv;
}
.refGradient{
display: block;
height: 100%;
left: 0;
position: absolute;
top: 100%;
width: 100%;
z-index: 100;
_height:176px;
_width:228px;
filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ee000000',GradientType=0 );
-ms-filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ee000000',GradientType=0 );
}
</style>
<![endif]-->
<script type="text/javascript">
</script>
</head>
<body>
<div id="wrapper">
<div id="test">abc</div>
<div class="reflectionBox">
<span class="refImage"></span><span class="refGradient"></span>
<img class="pic" src="http://xiu.56img.com/upload/mm/woxiudatu/92/65/1377252705_lulu180380646.jpg" />
</div>
</div>
</body>
</html>
http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/cross-browser-css-reflections-glows-and-blurs/
http://msdn.microsoft.com/en-us/library/ms532997(VS.85,loband).aspx
分享到:
相关推荐
android对图片操作, 圆角图片、图片倒影,比较简单的,
Android图片倒影+圆角图片
[Android应用源码]-图片倒影效果源码
ios应用源码之图片倒影 .
QT 图片查看软件,移动效果+图片倒影 网上找的,拿来大家共享! QT4.5.3 + vc6编译通过
js html5实现图片倒影效果代码,DIV CSS JS版图片倒影特效实现,只需IMG标签使用一个class即可实现图片倒影功能美化效果。
图片倒影制作工具(一键快速完成)上下左右都可以做倒影,可设置倒影间隔等。 【功能说明】 打开一张图片自动生成倒影。 只需简单几步操作就可以为自己的图片添加倒影效果,完全傻瓜式操作。支持各种常用图片...
原生js图片倒影幻灯片切换效果,样式很酷,非原创,学习借鉴
图片倒影效果,asp、jsp、php、html都适用
通过自定义Gallery实现图片的切换效果,再加上图片的倒影效果,有好心的楼主分享的,我在其中按照自己的需要做了点改动,和大家分享下
这是一款基于HTML5的图片倒影特效,同时它主要利用了CSS3的倾斜属性,通过这样的渲染,让图片整体看上去很富有立体感,图片的倒影看上去也非常逼真,是一款比较实用的HTML5图片应用。
很炫的一种gallery效果,滑动图片,可以切换图片,并且图片下方有图片的倒影,并且切换有角度的变换。
JS在不改变原图的情况下让其产生倒影的视觉效果
//图片倒影线程 Graphics graphics; //该Applet的Graphics对象 Graphics waveGraphics; //倒影的Graphics对象 Image image; //Applet的Image对象 Image waveImage; //倒影的Graphics对象 int current...
jquery控制图片倒影效果,可改变透明度和倒影高度
Android Studio 中实现图片倒影、阴影效果
android的图片模糊处理一般用的都是高斯模糊,但高斯模糊计算速度较慢,为了尽快得到模糊后的图片,此demo给出了一个解决方案。此外,dmeo中还加了倒影效果。
这是一个、javascript让图片翻转的例子,制造倒影效果,很简单 但是很实用,而且不是那种很长的代码型的,值得学习和使用 是倒影效果中的上品..
js图片倒影显示幻灯片切换代码是一款中间大图凸起显示两边缩略图横向切换特效。