- html2canvas - http://html2canvas.hertzen.com/
- StackBlur - http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html
- HTML 5 Canvas
另外参见 http://fsasso.com/labs/blur/ 居然也很容易地实现了 CSS 3 + HTML 5 丝般顺滑的导航栏毛玻璃背景效果。
截图:
回复内容:
canvas截了一张大图,滤镜处理(毛玻璃化),放在了header容器后面,尺寸与header容器一致,且header容器设置半透,漏出后面的截图。该canvas元素垂直坐标与浏览器滚动同步,保证漏出的区域是页面的背景。
原理很简单,有些效果细节花了点心思调节。
1.截图的时候,header先隐藏,否则最顶部的效果出不来。
2.当浏览器resize的时候,需要重新截图。这里处理暴力了点,直接删掉滤镜层,避免重复截图的性能消耗。感兴趣的,可以做一下函数节流来提升resize时候重新截图的性能。
3.根据最近WWDC,safari支持原生毛玻璃效果。http://caniuse.com/#search=backdrop-filter。
话说我们改域名了,http://wj.qq.com/ 实现这个毛玻璃的效果需要用到的库和方法楼主基本都提到了。
具体实现过程可以参考 @黎博 的答案
补充一些实现过程中的细节
- html2canvas效率很低,如果页面中的dom较多,渲染时间可达300ms+,所以实时渲染是做不到的。所以只能在初始化的时候截一个长图,然后通过移动图片的位置来实现。
- resize的时候要放弃之前的图,是因为很多元素的排版在重绘的时候的相对位置会发生改变,因此原先的图可能无法复用。(可以在lz举得这个例子Blur!中尝试resize下就能看到副作用)
- html2canvas是根据dom树和css样式绘制canvas的,所以如果有动画或者存在样式变化的元素要做特殊处理
- 没有达到完美效果可能是楼主忽略了一个半透明的遮罩层,毛玻璃的效果只有模糊还是不够的
- ls说提前截图的方案在一定程度上也是可行的,但是考虑到第二个因素以及维护成本(比如换了背景图,样式修改什么的就要记得重新截一次图)可能就不是特别合适
下边缘阴影
————————————————————————
你是说这个阴影么,这就是box-shadow啊,我都给你截图了... Opera30.0下测试,窗体resize之后,毛玻璃效果丢失。 楼上分析的做法是对的
这个模糊效果不是实时的,将按钮换个颜色就发现了。而且你看,他们的轮播图连背景也没换,其实也不需要渲染页面后截图,整张网页的图是早就截好的。
至于下面那个网址...
这么一段代码不就已经说明一切了么。
filter: blur(20px)
声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
相关文章推荐
• 利用简洁的图片预加载组件提升html5移动页面的用户体验 _html5教程技巧• H5你真的了解吗?(绝对干货)• 开发人员所需要知道的HTML5性能分析面面观_html5教程技巧• HTML 5标签、属性、事件及兼容性速查表• 中期来看,如果基于 HTML5 的应用和游戏大量涌现,iOS 相对于 Android 的应用优势将会大幅削弱?苹果有何应对措施?PHP入门视频教程之一周学会PHP
所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通过一周的深入学习让你快速掌握PHP的各项技能,助你的工作和学习更上层楼!
PHP教程248531次播放
弹指间学会HTML视频教程
《弹指间学会HTML视频教程》从最基本的概念开始讲起,步步深入,带领大家学习HTML,了解各种常用标签的意义以及基本用法,学习HTML知识为以后的学习打下基础
HTML教程71581次播放
弹指间学会CSS视频教程
CSS即层叠样式表(Cascading StyleSheet)。 在网页制作时采用层叠样式表技术,可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
CSS教程44699次播放
CSS3 最新视频教程
《CSS3 最新视频教程》中 CSS 用于控制网页的样式和布局。 CSS3 是最新的 CSS 标准, 本教程向您讲解 CSS3 中的新特性。通过实例进行讲解,更容易提高学习的效率!
CSS3教程31467次播放
相关课程推荐
1/1