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的新特性
Sep 05 HTML / CSS
CSS3制作翻转效果_动力节点Java学院整理
Jul 11 HTML / CSS
css3的图形3d翻转效果应用示例
Apr 08 HTML / CSS
使用CSS3创建动态菜单效果
Jul 10 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
CSS3中设置3D变形的transform-style属性详解
May 23 HTML / CSS
利用html5 canvas动态画饼状图的示例代码
Apr 02 HTML / CSS
h5实现获取用户地理定位的实例代码
Jul 17 HTML / CSS
iframe在移动端的缩放的示例代码
Oct 12 HTML / CSS
html5用video标签流式加载的实现
May 20 HTML / CSS
使用HTML+Css+transform实现3D导航栏的示例代码
Mar 31 HTML / CSS
Li list-style-image 图片垂直居中实现方法
May 21 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 JSON格式数据交互实例代码详解
2011/01/13 PHP
PHP5下$_SERVER变量不再受magic_quotes_gpc保护的弥补方法
2012/10/31 PHP
利用phpexcel把excel导入数据库和数据库导出excel实现
2014/01/09 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
Yii2 assets清除缓存的方法
2016/05/16 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP制作登录异常ip检测功能的实例代码
2016/11/16 PHP
PHP对称加密算法(DES/AES)类的实现代码
2017/11/14 PHP
Javascript 继承机制实例
2009/08/12 Javascript
JavaScript 基础知识 被自己遗忘的
2009/10/15 Javascript
javascript模拟的Ping效果代码 (Web Ping)
2011/03/13 Javascript
基于jquery的放大镜效果
2012/05/30 Javascript
js charAt的使用示例
2014/02/18 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
Javascript闭包(Closure)详解
2015/05/05 Javascript
基于jQuery仿淘宝产品图片放大镜特效
2020/10/19 Javascript
JS去除空格和换行的正则表达式(推荐)
2016/06/14 Javascript
js 定义对象数组(结合)多维数组方法
2016/07/27 Javascript
js select实现省市区联动选择
2020/04/17 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
Nodejs实现爬虫抓取数据实例解析
2018/07/05 NodeJs
node.js +mongdb实现登录功能
2020/06/18 Javascript
详解Python的Twisted框架中reactor事件管理器的用法
2016/05/25 Python
Python控制多进程与多线程并发数总结
2016/10/26 Python
手把手教你用python抢票回家过年(代码简单)
2018/01/21 Python
Python适配器模式代码实现解析
2019/08/02 Python
使用python快速在局域网内搭建http传输文件服务的方法
2019/11/14 Python
python实现实时视频流播放代码实例
2020/01/11 Python
python统计函数库scipy.stats的用法解析
2020/02/25 Python
分享CSS3制作卡片式图片的方法
2016/07/08 HTML / CSS
HTML5 Canvas画线技巧——实现绘制一个像素宽的细线
2013/08/02 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
祖国在我心中演讲稿400字
2014/05/04 职场文书
汽车销售经理岗位职责
2014/06/09 职场文书
滴水洞导游词
2015/02/10 职场文书
Apache自带的ab压力测试工具的实现
2022/07/23 Servers