注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

左岸

web前端

 
 
 

日志

 
 

制作倒影 (box-reflect)  

2014-07-30 15:54:30|  分类: css3 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |

一、box-reflect

css3的box-reflect属性可以实现倒影的效果,但是浏览器的支持不好(仅webkit内核的浏览器支持),网上写的在chrome、Safari、和Opera下支持,我在chrome和Opera下试验没效果(也可能我的版本低),但是也可以得出pc端的项目目前这个属性不可用(移动端没试验)。仅作为对css3的学习加以了解。

1、语法:

box-reflect:none | <direction> <offset>? <mask-box-image>?

此属性不是w3c标准属性,需加私有属性

-webkit-box-reflect:none | <direction> <offset>? <mask-box-image>?

2、取值的说明:

none:默认,无倒影。

<direction>:设置倒影生成的方向,可取above(上)、below(下)、left(左)、right(右),需要在放置倒影的地方留出区域。

<offset>:设置倒影和原图之间的间距,可像素值或百分比,可正可负。

<mask-box-image>:设置倒影的遮罩效果,可用png透明背景图片,也可是渐变(仅线性渐变可以。径向渐变无效果)生成的背景图像,offset值必须有 没有距离用0

3、实例:

box-reflect:above;-webkit-box-reflect:above;       //倒影在原图上面的效果;

box-reflect:above  20px;-webkit-box-reflect:above 20px;       //倒影在原图上面的效果,并距原图20px;

box-reflect:above 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));-webkit-box-reflect:above 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.0) 30%,rgba(250,250,250,0.3));;       //倒影在原图上面的,有渐变遮罩 ;

box-reflect:above 10px url(img/css-mask.png); -webkit-box-reflect:above 10px url(img/css-mask.png);      //倒影在原图上面的效果,有图片遮罩;

4、firefox浏览器可以-moz-element()代替。

html:<div class="ref_box" id="moz-ref"><img  src="pic01.jpg" /></div>      //img外面的div必须有id

css(使用伪类):.ref_box{width:100px;}#moz-ref:after{content:"";display:block;background:-moz-element(#moz-ref) no-repeat;width:auto;height:120px;-moz-transform:scaleY(-1);}

 

二、兼容各浏览器的倒影制作

html:

<div class="image-block">
        <img src="images/book1.jpg" alt="" />
        <div class="reflection">
            <img src="images/book1.jpg" alt="" />
            <div class="overlay"></div>
        </div>
    </div>

css:

.image-block {
 width:78px;
 margin:0px 10px;
 float:left;
}

.reflection {
 position:relative;
}

.reflection img { 
 -webkit-transform: scaleY(-1);
     -moz-transform: scaleY(-1);
     -ms-transform: scaleY(-1);
      -o-transform: scaleY(-1);
      transform: scaleY(-1);
      filter: flipv;
 opacity:0.20;
 filter: alpha(opacity='20');
}

.overlay {position:absolute; top:0px; left:0px; width:78px; height:120px;
 background-image: -moz-linear-gradient(center bottom, rgb(255,255,255) 60%, rgba(255,255,255,0) 75%);
 background-image:  -o-linear-gradient(rgba(255,255,255,0) 25%, rgb(255,255,255) 40%);
 background-image:     -webkit-gradient(linear, left bottom, left top, color-stop(0.60, rgb(255,255,255)), color-stop(0.75, rgba(255,255,255,0)));
 filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColor=0, EndColorStr=#ffffff);
}

  评论这张
 
阅读(59)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017