一次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 ...
随机推荐
- Python实现IOC控制反转
思路: 用一个字典存储beanName和资源 初始化时先将beanName和资源注册到字典中 然后用一个Dscriptor类根据beanName动态请求资源,从而实现控制反转 # -*- coding ...
- SSL公钥证书传递进行隐匿传输数据
title: 使用X.509公钥证书传递进行隐匿传输数据 date: 2018-02-11 17:47:50 tags: --- 使用X.509公钥证书传递进行隐匿传输数据 看到国外一篇有关于在ssl ...
- Python3(八) 枚举详解
一.枚举其实是一个类 建议标识名字用大写 1.枚举类: from enum import Enum class VIP(Enum): YELLOW = 1 GREEN = 2 ...
- 记一次IE浏览器做图片预览的坑
随便写写吧,被坑死了 IE 10 及 IE10以上,可以使用FileReader的方式,来做图片预览,加载本地图片显示 IE 9 8 7 没有FileReader这个对象,所以只能使用微软自己的东西来 ...
- Tomcat 配置2 tomcat-users.xml
Tomcat的配置 Tomcat的主要配置文件有3个,分别是: Tomcat-users.xml. web.xml server.xml. 配置Tomcat-users.xml 该文 ...
- sed知识及常用用法梳理
1.sed命令简介及其参数说明 sed流编辑器,擅长对文本进行增删改查,过滤指定的字符串和取指定行,也可以在行中字符串前后插入内容,功能非常强大. 注意:sed默认只支持基本的正则表达式,如果要想支持 ...
- java连接Oracle数据库,从ResultSet中提取数据出现java.sql.sqlException结果集已耗尽
出现错误的原因是ResultSet中并没有任何东西,再调用next()方法就会出错,原因可能是oracle创建用户,表没有提交,commit即可
- codewars--js--the highest and lowest number + JS 字符串和数组相关知识
本文参考: http://blog.csdn.net/tyrionj/article/details/78653426 http://www.runoob.com/jsref/jsref-obj-st ...
- [MySQL]ANALYZE TABLE 更新索引基数
MySQL使用存储的键分布基数来确定表连接顺序在决定对查询中的特定表使用哪些索引时,也会使用使用键分布基数 ANALYZE TABLE 表名 可以更新表的索引基数,使其更接近非重复的记录数,记录数可以 ...
- 802.11有线等效加密WEP
有线等效加密(WEP)标准是802.11无线安全早期的解决方案,WEP并不安全. 既然WEP并不安全,为什么还要学习WEP呢? WEP简单,相比后续出现的加密协议,它不要求有多么强大的计算能力.一些老 ...