<!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设计中...