CSS3图片倒影技术

        目前为止我们已经探讨了很多CSS3中的新功能和新特征。除了上面这些，实际上还有很多CSS新属性并未包含进CSS3官方标准中，像谷歌浏览器或火狐浏览器等都会利用CSS的浏览器引擎前缀(Vendor Prefix)来实现很多自定义的CSS功能。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

观看演示

实现倒影的基本语法


实现倒影的基本语法非常的直观，假设我们想给下面的图片增加倒影效果，可以这样写：

1. img {
   
2.     -webkit-box-reflect: below;
   
3. }

复制代码

上面这个例子中倒影出现了图片的下方，但实际上我们也可以将倒影安置在左侧、右侧或上侧。


倒影偏移量


Offset属性值用来定义图片和倒影影像之间的间距。参考下面的代码：

1. img {
   
2.     -webkit-box-reflect: below 10px;
   
3. }

复制代码

上面的代码中，我们使图片和倒影影像之间相聚10px；

给倒影增加消隐效果


在现实生活中，倒影的出现通常是上半部比较清晰，下面半部逐渐消隐。为了在CSS中实现这种效果，我们需要运用CSS3渐变色(Gradients)功能，就像下面这样：

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

复制代码

这段代码就能达到这样的效果：

我们还可以使用color-stop来控制色彩过渡，让倒影更加漂亮：

1. 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)));}

复制代码

火狐浏览器中倒影的实现


目前只有Webkit浏览器(谷歌浏览器和Safari浏览器)实现box-reflect属性。为了在火狐浏览器中也实现倒影功能，我们需要寻找另外的途径：使用-moz-element()方法。这个方法能够复制指定网页元素的内容。让我们来看看下面的例子：


我们把图片包裹着一个ID是someid的<div>里。


并且，为了存放倒影影像，我们将使用:before伪元素，就像下面：

1. #someid {
   
2.    position: relative;
   
3.    /* 给倒影留下空间 */
   
4.    margin-bottom: 120px;
   
5. }
   
6. 
   
7. #someid:before {
   
8.    content:""; /* needed or nothing will be shown */
   
9. 
   
10.    background: -moz-linear-gradient(top, white, white 30%, rgba(255,255,255,0.9) 65%, rgba(255,255,255,0.7)) 0px 0px,
    
11.                -moz-element(#someid) 0px -127px no-repeat;
    
12. 
    
13.    -moz-transform: scaleY(-1); /* flip the image vertically */
    
14.    position:relative;
    
15.    height:140px;
    
16.    width: 360px; /* 需要 > image width + margin + shadow */
    
17.    top: 247px;
    
18.    left:0px;
    
19. }

复制代码

       这里的-moz-transform是一个负值，作用就是让复制过来的图形上下颠倒，达到倒影的效果。为了让:before伪元素跟原始图形相配合，我们需要移动它的位置。这里的背景偏移量 (-127px)是:before伪元素高(140px) – (图片的高 (247px) + div的border (20px))。需要注意的是，火狐浏览器版的倒影实现只能用在页面的背景是真实背景。背景色要和:before伪元素使用的渐变色的颜色一致。


       因为所有的属性都是来实现倒影的，而且这些属性都有火狐浏览器独有的前缀，和Webkit的倒影不冲突，所以在代码在可以把两个版本倒影方法都写上，保证两种浏览器里都有效果。


视频倒影
       官方文档中说当倒影的实体内容变化时，倒影的内容也会相应更新。因此，这种技术用在视频是有特殊的效果。

观看演示

CSS倒影技术在火狐浏览器中的小问题
有时，火狐浏览器生成的渐变**形会比背景元素稍微小一些，导致有一些间隙线出现。为了避免这种情况出现，在:before伪元素的顶部和底部加1px的padding，并且分别设置背景的裁剪方式和原点：

1. padding: 1px 0px;
   
2. background-origin: border-box, content-box;
   
3. background-clip: border-box, content-box;

复制代码CSS3REFLECT倒影

【CSS3图片倒影技术】相关文章

1. CSS3图片倒影技术

2. CSS3图片倒影技术实现及原理

3. Google的WebP图片格式，目的成为下一代网络图片标准

4. CSS3系列教程:背景图片(背景大小和多背景图)

5. 利用CSS3 Gradients创建无图片水晶按钮

6. CSS3 animate实现图片墙3D翻转效果

7. CSS3 transition实现超酷图片墙动画效果

8. CSS3 transition实现超酷图片墙动画效果

9. 用纯CSS3实现图片幻灯片切换效果

10. CSS3实现的图片加载动画效果

本文来源：https://www.51html5.com/a1042.html