css3实现漂亮的倒影效果

缺乏、安全感 2022-04-01 06:28 335阅读 0赞

实际上还有很多CSS新属性并未包含进CSS3官方标准中。-webkit-box-reflect属性就是以谷歌浏览器为代表的Webkit渲染引擎独有的特征。-webkit-box-reflect的作用是让图片出现倒影。

如果一个图片，我们想要给其增加倒影，做法如下：

html：

css样式：

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

效果：  
　  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]  
如果希望倒影和图片之间有空隙可是设置css样式：

img\{  
\-webkit-box-reflect: below 10px;  
\}  
效果如图：

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 1]

实现渐变效果的css如下：

img\{  
\-webkit-box-reflect: below 10px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.7)));  
\}  
效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 2]

但是，此方法只能适用于webkit内核的浏览器。要想可以兼容火狐浏览器，接下来，介绍另外一种方法。

html代码如下：

css代码如下：

*{
            padding:0px;
            margin:0px;
        }
       .wrap{position:relative;} 
       .image{margin-bottom:3px;} 
       .down{position: relative;left:-11px;top:-10px;} 
       .reflection{width:421px;height:180px;left:-10px;background:url(images/7.jpg) bottom center no-repeat; 
       -webkit-transform: scaleY(-1); 
       -moz-transform: scaleY(-1); 
       -ms-transform: scaleY(-1); 
       -o-transform: scaleY(-1); 
       transform: scaleY(-1); 
       opacity:0.5; 
       filter:alpha(opacity='50'); 
    } 
    .overlay{position: relative;width:421px;height:180px;bottom:149px; 
    		background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 20%, rgba(255,255,255,0) 90%); 
    		background-image: -o-linear-gradient(rgba(255,255,255,0) 10%, rgb(255,255,255) 30%); 
    		background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0.20, rgb(255,255,255)), color-stop(0.90, rgba(255,255,255,0))); 
    		}

transform：scaleY（-1）是的图片上下颠倒。  
filter为过滤器，定义图片的可视效果，模糊与饱和度等。  
background-image：-moz-linear-gradient，设置图片的渐变。  
看着css代码多，其实并不是很难，很多都是加各种浏览器的前缀，解决兼容性问题。  
效果图：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 3]

转自：[https://www.cnblogs.com/my-freedom/p/6825871.html][https_www.cnblogs.com_my-freedom_p_6825871.html]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70]: /images/20220401/afe96c41491843518c0368f89b70f93f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 1]: /images/20220401/7492d61a148144948b920a1dfa115c8b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 2]: /images/20220401/4075f2126939412a8e69b9e91e50a2e2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3ODg1NjUx_size_16_color_FFFFFF_t_70 3]: /images/20220401/65e526f2a97443909afe85d1dde3c283.png
[https_www.cnblogs.com_my-freedom_p_6825871.html]: https://www.cnblogs.com/my-freedom/p/6825871.html