<!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中，我们可以利用自定义`Gallery`控件来实现图片的平滑切换，并结合倒影效果为用户提供更为生动的交互体验。 `...
在Android开发中，创建圆角图片和图片倒影是常见的需求，这主要涉及到图像处理和视图绘制的技术。本文将详细讲解如何在Android平台上实现这些功能。 首先，让我们来看看如何生成圆角图片。在Android中，我们可以...
首先，让我们深入了解一下图片倒影的实现。在C#中，可以使用GDI+（Graphics Device Interface Plus）库来完成这一任务。步骤通常包括以下几步： 1. 加载原始图像：使用`Image.FromFile`或`Image.FromStream`方法...
在Android开发中，实现图片倒影效果是一种常见的视觉设计需求，可以增强用户界面的美观性和动态感。这个压缩包文件提供了实现图片倒影效果的源码示例，可以帮助开发者理解和学习如何在Android应用中创建此类效果。...
本文将深入探讨如何使用JavaScript实现图片倒影的功能，让图像在不改变原始图片的基础上，产生逼真的倒影效果。 首先，我们要明白倒影的原理：倒影通常是物体在水平面如水面、镜面等的反射，而在数字领域，我们可以...
QT 图片查看软件是一款基于QT库开发的图像浏览应用程序，其特色在于实现了移动效果和图片倒影功能。QT是一个跨平台的应用程序开发框架，由Qt Company提供，广泛应用于桌面、移动以及嵌入式设备上。它支持多种编程...
在这个特定的案例中，我们讨论的是一个具有独特视觉效果的“Gallery”实现，它具备角度变化、图片倒影以及平滑的图片切换功能。下面将详细解析这些知识点。 1. **Gallery组件**：在Android开发中，`Gallery`是一种...
在iOS应用开发中，创建图片倒影是一种常见的视觉效果，可以增强用户界面的美观性。本文将深入探讨如何使用Objective-C或Swift实现图片倒影功能，以及相关的关键知识点。 首先，我们要理解图片倒影的基本原理：它...
通过这样的JavaScript代码，你可以在任何支持JavaScript的Web页面中轻松实现图片倒影效果。无论你使用的是ASP、JSP、PHP还是HTML，只要在合适的地方插入这段代码，就可以为你的图片添加生动有趣的倒影特效。
在JavaScript中创建图片倒影效果是一项常见的前端技术，它能够为网页增添动态和美观的视觉体验。本示例提供了一种简洁且实用的方法来实现图片的倒影效果，无需大量复杂的代码。以下将详细讲解这一过程及其涉及的技术...
首先，我们来讨论图片倒影效果。倒影效果通常用于使图片看起来更有趣、更具吸引力。在Android中，可以利用Bitmap对象的可复制性来实现。基本步骤包括： 1. 创建原始Bitmap的副本。 2. 将副本翻转，通常是沿着Y轴进行...
在本文中，我们将深入探讨如何使用原生JavaScript实现图片倒影幻灯片切换效果，这是一种在网页设计中常用于展示动态图像序列的方式。这个效果既酷炫又实用，能够吸引用户的注意力并提升用户体验。虽然这个效果并非...
这个名为"js html5实现图片倒影效果代码.zip"的压缩包提供了实现这一目标的具体代码示例。 首先，我们来看HTML5的`<img>`标签，它是用来在网页中插入图像的基础元素。在描述中提到，只需给`<img>`标签添加一个特定...
在图片倒影效果中，我们通常会使用`transform: rotateY()`和`transform-origin`来实现3D倾斜，以及`translateY()`来调整倒影的位置。 具体实现步骤如下： 1. 在HTML中，我们需要一个包含原始图片和倒影图片的容器...
在JavaScript（JS）中实现图片倒影效果是一种常见的前端技术，可以为网页增添动态和美观的视觉体验。本文将深入探讨如何使用纯JS代码来创建一个动态的图片倒影效果，而无需借助像Photoshop这样的图像编辑软件进行...
在网页设计中，为了增强视觉效果，经常使用各种特效，其中图片倒影效果是一种常见的手法。本教程将详细讲解如何利用jQuery库实现图片倒影功能，同时探讨如何调整透明度和倒影高度，以达到理想的视觉表现。 首先，...
图片倒影制作工具(一键快速完成)上下左右都可以做倒影，可设置倒影间隔等。 【功能说明】 打开一张图片自动生成倒影。 只需简单几步操作就可以为自己的图片添加倒影效果，完全傻瓜式操作。支持各种常用图片...
首先，我们来讨论图片倒影效果的实现。在Android中，倒影效果通常通过创建一个原始图片的副本，然后翻转副本并调整其透明度来实现。以下是一种常用的方法： 1. 创建一个新的Bitmap对象，用于存储倒影。这个Bitmap的...
这个话题涵盖了两个方面：创建图片的倒影效果和制作圆角图片。这两个特性可以用于提升应用的用户体验，使其看起来更加美观和专业。 首先，我们来讨论如何在Android中实现图片的倒影效果。倒影效果通常在UI设计中...