CSS3 Notes: -webkit-box-reflect实现倒影的实例


Posted in HTML / CSS onDecember 08, 2016

平常我们要实现倒影的效果,一般的做法是使用多个DOM元素绝对定位+scale(负-1)或者rotate。这种方法的缺点是占据空间以及DOM元素过多。

在使用webkit内核的浏览器中(chrome,safari,移动端浏览器),可以使用-webkit-box-reflect属性来实现倒影,语法如下所示

[ above | below | right | left ]? <length>? <image>?

该值包涵了三部分:方位+偏移量+遮罩层

方位是必不可少的;在使用遮罩层的时候,偏移量是不可少的,如没有则用零代替

!!!重要:遮罩层的效果与颜色无关,例如使用渐变颜色做遮罩,都是实色则透明,透明则暴漏原始颜色

使用示例如下所示:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/csss">
    .box{ width:200px; height:200px; margin-bottom:20px;transform:scale(-1,1); background-image:linear-gradient(90deg,red,yellow);-webkit-box-reflect:below 10px linear-gradient(180deg,transparent,#000); }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

效果如下:

CSS3 Notes: -webkit-box-reflect实现倒影的实例

如果需要在firefox中实现类似效果,可以使用-moz-element()函数来实现,但是在旋转下效果差别较大,如下所示。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
  <style type="text/css">
    .box{ width:200px; height:200px; margin:100px 0 0 100px; }
    .box1{ background-image:linear-gradient(180deg,red,yellow); transform:scale(1,-1) rotate(45deg)}
    .box2{ background-image:-moz-element(#box1); }
  </style>
</head>
<body>
  <div class="box box1" id="box1"></div>
  <div class="box box2" id="box2"></div>
</body>
</html>

CSS3 Notes: -webkit-box-reflect实现倒影的实例

在chrome下使用-webkit-box-reflect的效果是这样的

CSS3 Notes: -webkit-box-reflect实现倒影的实例

如果要兼容IE浏览器还可以使用SVG或者canvas来做,SVG主要利用pattern+mask+linearGradient+scale来做,canvas使用scale+globalCompositeOperation。

SVG例子部分代码如下:

<svg width="200" height="200">
    <defs>
      <linearGradient id="a" x1="0" y1="0" x2="0" y2="1">
        <stop offset="0%" style="stop-color:yellow"/>
        <stop offset="100%" style="stop-color:red"/>
      </linearGradient>
      <linearGradient id="b" x1="0" y1="0" x2="0" y2="100%">
        <stop offset="0%" style="stop-color:rgba(255,255,255,0)"/>
        <stop offset="100%" style="stop-color:rgba(255,255,255,1)"/>
      </linearGradient>
      <mask id="c" x="0" y="0" width="1" height="1">
        <rect x="0" y="0" width="100%" height="100%" style="fill:url(#b)" />
      </mask>
    </defs>
    <rect x="0" y="0" width="200" height="200" style="fill:url(#a);" mask="url(#c)">
</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实现最简单效果也好。希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
纯css3无js实现的Android Logo(有简单动画)
Jan 21 HTML / CSS
CSS3之背景尺寸Background-size使用介绍
Oct 14 HTML / CSS
css3实现超炫风车特效
Nov 12 HTML / CSS
一款纯css3制作的2015年元旦雪人动画特效教程
Dec 29 HTML / CSS
CSS3之transition实现下划线的示例代码
May 30 HTML / CSS
css3针对移动端卡顿问题的解决(动画性能优化)
Feb 14 HTML / CSS
html5音频_动力节点Java学院整理
Aug 22 HTML / CSS
html5 worker 实例(一) 为什么测试不到效果
Jun 24 HTML / CSS
HTML5中的Scoped属性使用实例
Apr 23 HTML / CSS
浅谈amaze-ui中datepicker和datetimepicker注意的几点
Aug 21 HTML / CSS
css 中多种边框的实现小窍门
Apr 07 HTML / CSS
CSS 鼠标点击拖拽效果的实现代码
Dec 24 HTML / CSS
css3中单位px,em,rem,vh,vw,vmin,vmax的区别及浏览器支持情况
Dec 06 #HTML / CSS
详解CSS3阴影 box-shadow的使用和技巧总结
Dec 03 #HTML / CSS
使用CSS3实现一个3D相册效果实例
Dec 03 #HTML / CSS
无需JS和jQuery代码实现CSS3鼠标浮动放大图片
Nov 21 #HTML / CSS
CSS3实现文字波浪线效果示例代码
Nov 20 #HTML / CSS
CSS3常用的几种颜色渐变模式总结
Nov 18 #HTML / CSS
CSS3 2D模拟实现摩天轮旋转效果
Nov 16 #HTML / CSS
You might like
php简单实现无限分类树形列表的方法
2015/03/27 PHP
php简单统计字符串单词数量的方法
2015/06/19 PHP
PHP正则获取页面所有图片地址
2016/03/23 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
2010/10/22 Javascript
Jquery 的扩展方法总结
2011/10/01 Javascript
javascript中setAttribute()函数使用方法及兼容性
2015/07/19 Javascript
jQuery实现带有洗牌效果的动画分页实例
2015/08/31 Javascript
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
BootStrap table表格插件自适应固定表头(超好用)
2016/08/24 Javascript
JS 组件系列之BootstrapTable的treegrid功能
2017/06/16 Javascript
深入解析nodejs HTTP服务
2017/07/25 NodeJs
ReactNative 之FlatList使用及踩坑封装总结
2017/11/29 Javascript
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
开源一个微信小程序仪表盘组件过程解析
2019/07/30 Javascript
浅谈JS中几种轻松处理'this'指向方式
2019/09/16 Javascript
React 条件渲染最佳实践小结(7种)
2020/09/27 Javascript
vue项目配置同一局域网可使用ip访问的操作
2020/10/23 Javascript
在vue中使用eslint,配合vscode的操作
2020/11/09 Javascript
[48:47]VGJ.S vs NB 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[32:36]完美世界DOTA2联赛PWL S3 LBZS vs CPG 第二场 12.12
2020/12/16 DOTA
python中base64加密解密方法实例分析
2015/05/16 Python
python制作websocket服务器实例分享
2016/11/20 Python
numpy matrix和array的乘和加实例
2018/06/28 Python
matplotlib命令与格式之tick坐标轴日期格式(设置日期主副刻度)
2019/08/06 Python
使用PyWeChatSpy自动回复微信拍一拍功能的实现代码
2020/07/02 Python
CSS3 calc()会计算属性详解
2018/02/27 HTML / CSS
Europcar澳大利亚官网:全球汽车租赁领域的领导者
2019/03/24 全球购物
教师师德教育的自我评价
2013/10/31 职场文书
项目负责人任命书
2014/06/04 职场文书
管理岗位竞聘演讲稿
2014/08/18 职场文书
优秀团员事迹材料1000字
2014/08/20 职场文书
2014年招商工作总结
2014/11/22 职场文书
安全保证书格式
2015/02/28 职场文书
办公室禁烟通知
2015/04/23 职场文书