一次H5毛玻璃效果有感
印象中H5实现毛玻璃效果是挺好实现的,主要的代码就是css的filter:blur。
之前也用过几次,给背景图加高斯模糊啊,给一个div加高斯模糊啊。只要给需要添加高斯模糊的元素直接添加filter属性就好了,
但是今天遇到了一个需求,暂时无法解决很是灰心。

需求是给tabbar添加高斯模糊,开始一想简单啊,也是直接给tabbar的容器添加filter不就行了么?可想而知,并没有这么简单,
tabbar是高斯模糊了,可是tabbar后面的流并没有模糊,此时意识到实现这种效果并不简单啊。
我给tabbar添加filter,模糊的当然只是tabbar,后面的内容没有模糊到达人眼的效果也并不是毛玻璃效果。一直理解成生活中的那种模糊,
就是冬天里,进到屋里,眼前就是高斯模糊效果,模糊的也只是镜片,真实的事物也并没有添加filter属性,想当然的认为我只要给tabbar添加filter,不用给流添加filter就行了。
回想之前实现的高斯模糊也是谁要高斯模糊效果,就给谁添加,并不是在他的上面加一层高斯模糊的镜片。
调研了一些H5实现高斯模糊方法,主要也是想办法把需要高斯模糊的元素放到容器里然后让容器高斯模糊。
看了Android实现的效果,感觉确实还是有差距的啊,应该是自己的技术积累不够吧。只能调整UI改透明度了。
一次H5毛玻璃效果有感的更多相关文章
- 使用CSS3制作导航条和毛玻璃效果
导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...
- 解决css3毛玻璃效果(blur)有白边问题
做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...
- Swift 之模糊效果(毛玻璃效果,虚化效果)的实现
前言: 之前项目中有用到过Objective-C的的模糊效果,感觉很是不错,而且iOS8之后官方SDK也直接提供了可以实现毛玻璃效果的三个类:UIBlurEffect.UIVibrancyEffect ...
- iOS模糊效果(毛玻璃效果)的实现
前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解.但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番. ...
- qt qml fuzzyPanel 毛玻璃效果
毛玻璃效果,用qml来写代码真是简短,大爱qml:) [下载地址]http://download.csdn.net/detail/surfsky/8426641 [核心代码] Rectangle{ c ...
- CSS3中毛玻璃效果的使用方法
今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...
- 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】
转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...
- iOS开发小技巧--实现毛玻璃效果的方法
一.美工出图 二.第三方框架 -- DRNRealTimeBlur,框架继承自UIView.使用方法:创建UIView直接继承自框架的View,就有了毛玻璃效果 三.CoreImage -- 图片加高 ...
- android 开发 - 对图片进行虚化(毛玻璃效果,模糊)
概述 IPAD,IPHONE上首页背景的模糊效果是不是很好看,那么在 Android中如何实现呢.我通过一种方式实现了这样的效果. 开源库名称:anroid-image-blur 一个android ...
随机推荐
- Decorator - 装饰器
装饰器 Decorator, 先来看看对 decorator 这个名词的解释, 一个可调用的对象 A (decorator), 返回另一个可调用的对象 B, 在可调用的对象 C 的定义体之前通过语法 ...
- 《算法导论》第二章demo代码实现(Java版)
<算法导论>第二章demo代码实现(Java版) 前言 表示晚上心里有些不宁静,所以就写一篇博客,来缓缓.囧 拜读<算法导论>这样的神作,当然要做一些练习啦.除了练习题与思考题 ...
- css常用元素通用样式表
@charset "utf-8";html,body,a,h1,h2,h3,h4,h5,h6,p,a,b,i,em,s,u,dl,dt,dd,ul,ol,li,strong,spa ...
- tomcat 多端口 多容器 多域名 配置
先强调一个原则: server下面可以有多个service,用于配置不同监听端口 service下面可以有多个Host,用于配置该端口下的不同域名 Host里可以包含多个Context,用于配置该端口 ...
- oracle数据库的启动、关闭、连接
登陆数据库 方法一: $ sqlplus / as sysdba [oracle@dev /]$ sqlplus / as sysdba SQL*Plus: Release Production on ...
- js模拟post提交表单
function post(URL, PARAMS) { var temp = document.createElement("form"); ...
- 【学习笔记】:JavaScript基础知识超详细总结!
目录 一.JavaScript的实现 二.JavaScript语言的特点 三.JS与HTML如何结合 四.JS中的数据类型 四.JS的原始数据类型 2.JS的引用数据类型 五.JS引用数据类型之函数 ...
- 来去学习之---KMP算法--next计算过程
一.概述 KMP算法是一种字符串匹配算法,比如现有字符串 T:ABCDABCDABCDCABCDABCDE, P:ABCDABCDE P字符串对应的next值:[0,0,0,0,1,2,3,4,0] ...
- sublime中写python代码
SublimeREPL插件 这个是首先要安装的,此插件主要功能是为了实现交互,在安装后需要一些简单的配置 在Preferences--> Key Bindings--> user下添加如下 ...
- React HOC(高阶组件)
一.定义 高阶函数:函数接受函数作为输入,或者输出一个函数. 高阶组件:接受React组件作为输入,或是输出一个组件.即hocFactory:: W: React.Component => E: ...