CSS3中-webkit-box-reflect如何实现倒影
这篇文章主要介绍CSS3中-webkit-box-reflect如何实现倒影,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
创新互联专业为企业提供阳城网站建设、阳城做网站、阳城网站设计、阳城网站制作等企业网站建设、网页设计与制作、阳城企业网站模板建站服务,10年阳城做网站经验,不只是建网站,更提供有价值的思路和整体网络服务。
在使用webkit内核的浏览器中(chrome,safari,移动端浏览器),可以使用-webkit-box-reflect属性来实现倒影,语法如下所示
[ above | below | right | left ]?
该值包涵了三部分:方位+偏移量+遮罩层
方位是必不可少的;在使用遮罩层的时候,偏移量是不可少的,如没有则用零代替
!!!重要:遮罩层的效果与颜色无关,例如使用渐变颜色做遮罩,都是实色则透明,透明则暴漏原始颜色
使用示例如下所示:
JS Bin
效果如下:
如果需要在firefox中实现类似效果,可以使用-moz-element()函数来实现,但是在旋转下效果差别较大,如下所示。
JS Bin
在chrome下使用-webkit-box-reflect的效果是这样的
如果要兼容IE浏览器还可以使用SVG或者canvas来做,SVG主要利用pattern+mask+linearGradient+scale来做,canvas使用scale+globalCompositeOperation。
SVG例子部分代码如下:
canvas例子部分代码如下
var canvas = document.getElementById('canvas'), ctx = canvas.getContext('2d'); var linearGradient1 = ctx.createLinearGradient(0,0,0,200); linearGradient1.addColorStop(0,"red"); linearGradient1.addColorStop(1,"yellow"); var linearGradient2 = ctx.createLinearGradient(0,0,0,200); linearGradient2.addColorStop(0,"transparent"); linearGradient2.addColorStop(1,"#ffffff"); ctx.fillStyle = linearGradient1; ctx.fillRect(0,0,200,200); ctx.globalCompositeOperation = 'destination-out'; ctx.fillStyle = linearGradient2; ctx.fillRect(0,0,200,200);
以上是“CSS3中-webkit-box-reflect如何实现倒影”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!
名称栏目:CSS3中-webkit-box-reflect如何实现倒影
浏览地址:http://scyanting.com/article/ijoccd.html