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绘制天猫logo实现代码
Nov 06 HTML / CSS
实列教程 一款基于jquery和css3的响应式二级导航菜单
Nov 13 HTML / CSS
CSS3实现闪烁动画效果的方法
Feb 09 HTML / CSS
Css3圆角边框制作代码
Nov 18 HTML / CSS
HTML5中实现拖放效果无须借助javascript
Dec 26 HTML / CSS
html5指南-4.使用Geolocation实现定位功能
Jan 07 HTML / CSS
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
May 07 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
Jan 30 HTML / CSS
详解window.open被浏览器拦截的解决方案
Jul 18 HTML / CSS
AmazeUI 点击元素显示全屏的实现
Aug 25 HTML / CSS
Html5移动端网页端适配(js+rem)
Feb 03 HTML / CSS
原生CSS实现文字无限轮播的通用方法
Mar 30 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+Ajax实现表单验证的详解
2013/06/25 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
PHP图片处理之使用imagecopyresampled函数实现图片缩放例子
2014/11/19 PHP
php使用pdo连接并查询sql数据库的方法
2014/12/24 PHP
php集成开发环境详解
2019/09/24 PHP
jquery tab标签页的制作
2010/05/10 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
Node.js中使用计时器定时执行函数详解
2014/08/15 Javascript
js检测判断日期大于多少天的方法
2015/05/04 Javascript
jQuery formValidator表单验证
2016/01/07 Javascript
用JS动态改变表单form里的action值属性的两种方法
2016/05/25 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
.net MVC+Bootstrap下使用localResizeIMG上传图片
2017/04/21 Javascript
vue.js的安装方法
2017/05/12 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
vue.js 实现图片本地预览 裁剪 压缩 上传功能
2018/03/01 Javascript
electron实现qq快捷登录的方法示例
2018/10/22 Javascript
vue配置font-awesome5的方法步骤
2019/01/27 Javascript
JavaScript中构造函数与原型链之间的关系详解
2019/02/25 Javascript
python爬虫入门教程--优雅的HTTP库requests(二)
2017/05/25 Python
python爬虫入门教程--正则表达式完全指南(五)
2017/05/25 Python
Python实现的中国剩余定理算法示例
2017/08/05 Python
Python中eval带来的潜在风险代码分析
2017/12/11 Python
Django跨域资源共享问题(推荐)
2020/03/09 Python
Python实现数字的格式化输出
2020/08/01 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
西尔斯百货官网:Sears
2016/09/06 全球购物
NULL是什么,它是怎么定义的
2015/05/09 面试题
给校长的建议书600字
2014/05/15 职场文书
趣味运动会策划方案
2014/06/02 职场文书
施工安全责任书范本
2014/07/24 职场文书
安全生产奖惩制度
2015/08/06 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
在 Python 中利用 Pool 进行多线程
2022/04/24 Python