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教程(10):CSS3 HSL声明设置颜色
Apr 02 HTML / CSS
CSS3等相关属性制作分页导航实现代码
Dec 24 HTML / CSS
HTML5 Canvas图像模糊完美解决办法
Feb 06 HTML / CSS
详解HTML5 canvas绘图基本使用方法
Jan 29 HTML / CSS
HTML5安全介绍之内容安全策略(CSP)简介
Jul 10 HTML / CSS
HTML5 Canvas+JS控制电脑或手机上的摄像头实例
May 03 HTML / CSS
html5中JavaScript removeChild 删除所有节点
May 16 HTML / CSS
html5摇一摇代码优化包括DeviceMotionEvent等等
Sep 01 HTML / CSS
详解webapp页面滚动卡顿的解决办法
Dec 26 HTML / CSS
HTML如何让IMG自动适应DIV容器大小的实现方法
Feb 25 HTML / CSS
AmazeUI 评论列表的实现示例
Aug 13 HTML / CSS
html中相对位置与绝对位置的具体使用
May 15 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 mssql 日期出现中文字符的解决方法
2009/03/10 PHP
CentOS 安装 PHP5.5+Redis+XDebug+Nginx+MySQL全纪录
2015/03/25 PHP
ThinkPHP使用Smarty第三方插件方法小结
2016/03/19 PHP
基于jQuery的简单的列表导航菜单
2011/03/02 Javascript
js setTimeout 参数传递使用介绍
2013/08/13 Javascript
Jquery取得iframe下内容的方法
2013/11/18 Javascript
JavaScript设计模式之适配器模式介绍
2014/12/28 Javascript
javascript的BOM
2016/05/03 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
微信小程序 实例应用(记账)详解
2016/09/28 Javascript
web打印小结
2017/01/11 Javascript
angularjs实现简单的购物车功能
2017/09/21 Javascript
基于jquery实现五星好评
2017/11/18 jQuery
使用vue实现多规格选择实例(SKU)
2019/08/23 Javascript
在Django中使用Sitemap的方法讲解
2015/07/22 Python
Python面向对象程序设计类的封装与继承用法示例
2019/04/12 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
Python3的高阶函数map,reduce,filter的示例详解
2019/07/23 Python
python实现图像检索的三种(直方图/OpenCV/哈希法)
2019/08/08 Python
Pytorch实现的手写数字mnist识别功能完整示例
2019/12/13 Python
Django操作session 的方法
2020/03/09 Python
Django框架配置mysql数据库实现过程
2020/04/22 Python
用html5的canvas画布绘制贝塞尔曲线完整代码
2013/08/14 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
全球最大的户外用品零售商之一:The House
2018/06/12 全球购物
一些PHP的面试题
2015/05/06 面试题
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
银行办理业务介绍信
2014/01/18 职场文书
创建无烟单位实施方案
2014/03/29 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
个人债务授权委托书范本
2014/10/05 职场文书
政风行风评议心得体会
2014/10/21 职场文书
优秀党员主要事迹材料
2015/11/04 职场文书
nginx简单配置多个server的方法
2021/03/31 Servers
关于JavaScript 中 if包含逗号表达式
2021/11/27 Javascript
navicat 连接Ubuntu虚拟机的mysql的操作方法
2022/04/02 MySQL