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属性box-shadow使用指南
Dec 09 HTML / CSS
css3如何绘制一个圆圆的loading转圈动画
Jan 09 HTML / CSS
CSS3 中filter(滤镜)属性使用详解
Apr 07 HTML / CSS
CSS3 实现的火焰动画
Dec 07 HTML / CSS
html5播放视频且动态截图实现步骤与代码(支持safari其他未测试)
Jan 06 HTML / CSS
html5 worker 实例(二) 图片变换效果
Jun 24 HTML / CSS
详解前端HTML5几种存储方式的总结
Dec 27 HTML / CSS
Adobe Html5 Extension开发初体验图文教程
Nov 14 HTML / CSS
Html5百叶窗效果的示例代码
Dec 11 HTML / CSS
html5+css如何实现中间大两头小的轮播效果
Dec 06 HTML / CSS
Web前端:CSS最强总结 附详细代码
Mar 31 HTML / CSS
CSS实现背景图片全屏铺满自适应的3种方式
Jul 07 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
如何利用http协议发布博客园博文评论
2015/08/03 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
用PHP的socket实现客户端到服务端的通信实例详解
2017/02/04 PHP
ParseInt函数参数设置介绍
2014/01/02 Javascript
js格式化金额可选是否带千分位以及保留精度
2014/01/28 Javascript
jquery mobile页面跳转后样式丢失js失效的解决方法
2014/09/06 Javascript
jQuery与Ajax以及序列化
2016/02/01 Javascript
Bootstrap每天必学之按钮(Button)插件
2016/04/25 Javascript
纯原生js实现table表格的增删
2017/01/05 Javascript
MUI顶部选项卡的用法(tab-top-webview-main)详解
2017/10/08 Javascript
Vue打包后出现一些map文件的解决方法
2018/02/13 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
vue3.0中setup使用(两种用法)
2020/12/02 Vue.js
[59:42]Secret vs Alliacne 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python self,cls,decorator的理解
2009/07/13 Python
Python自动化测试ConfigParser模块读写配置文件
2016/08/15 Python
Python实现1-9数组形成的结果为100的所有运算式的示例
2017/11/03 Python
Python pygorithm模块用法示例【常见算法测试】
2018/08/16 Python
python基础知识(一)变量与简单数据类型详解
2019/04/17 Python
Python imread、newaxis用法详解
2019/11/04 Python
Python如何用filter函数筛选数据
2020/03/05 Python
tensorflow从ckpt和从.pb文件读取变量的值方式
2020/05/26 Python
matplotlib交互式数据光标实现(mplcursors)
2021/01/13 Python
暇步士官网:Hush Puppies
2016/09/22 全球购物
巴西婴儿用品商店:Bebe Store
2017/11/23 全球购物
英国计算机产品零售商:Novatech(定制个人电脑、笔记本电脑、工作站和服务器)
2018/01/28 全球购物
Etam德国:内衣精品店
2019/08/25 全球购物
捷克建筑材料网上商店:DEK.cz
2021/03/06 全球购物
盛大笔试题
2016/11/05 面试题
元旦晚会主持词
2014/03/24 职场文书
教师师德师风个人整改方案
2014/09/18 职场文书
委托证明范本
2014/11/25 职场文书
2015年学雷锋活动总结
2015/02/06 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
阿里云服务器Ubuntu 20.04上安装Odoo 15
2022/05/20 Servers