css3滑动图像_CSS3图像反射[CSS3技巧]

最新推荐文章于 2024-07-24 20:47:06 发布

cune1359

最新推荐文章于 2024-07-24 20:47:06 发布

阅读量212

点赞数

文章标签： java css python js html ViewUI

到目前为止，我们已经讨论了CSS3中的许多新属性。除此之外，实际上还有一些其他值得尝试CSS3正式规范中未包含的属性，其中之一是Webkit发起的box-reflect属性。此属性可以反映指定的对象。

基本思考

基本实现非常直观；假设我们要在真实对象下方反射。我们可以这样写：

img {
    -webkit-box-reflect: below;
}

本示例说明如何在对象下方（位置）反射图像。但是，在这种情况下，我们也可以拥有如此反射到right ， left ，和above 。

反射偏移

偏移量用于定义反射和反射的真实对象之间的间隙。让我们看看下面的代码片段；

img {
    -webkit-box-reflect: below 10px;
}

在上面的代码中，我们将反射与真实对象分开了10px ；

观看演示

渐变遮罩

我们通常看到的反射效果是底部的淡入淡出，仅显示真实对象的一半或更少。为了复制这种效果，我们可以应用CSS3渐变来掩盖对象，就像这样；

-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1)));

该代码将导致以下演示；

我们还可以使用color-stop来控制过渡并使反射看起来更好：

img {
	-webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(70%, transparent) , to(rgba(250, 250, 250, 0.1)));
}

观看演示

Firefox的替代品

但是，此属性目前仅在Webkit浏览器（意味着Safari和Chrome）中有效。为了在Firefox中实现相同的效果，您需要另一种途径：使用-moz-element()函数。此函数本质上将从特定HTML元素生成或复制内容。让我们看下面的例子；

我们将图像包裹在<div>并带有moz-reflect id。

<div id="moz-reflect">
	<img src="images/everything_matters.large.jpg">
</div>

并且，为了保持反射，我们将使用:after伪元素 ，如下所示；

#moz-reflect:after {
	content: "";
	display: block;
	background: -moz-element(#moz-reflect) no-repeat;
	width: auto;
	height: 375px;
	margin-bottom: 100px;
	-moz-transform: scaleY(-1);
}

具有负比例的-moz-transform用于将生成的对象上下翻转。另外，请确保height与实际对象的height足够精确，以避免不必要的多余线条来放置反射。

不幸的是，仍然没有简单的方法使用这种做法在Firefox中创建良好的反射效果。上面的代码将仅创建反射，而不会产生褪色效果。