一次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 ...
随机推荐
- CVE-2019-0232:Apache Tomcat RCE复现
CVE-2019-0232:Apache Tomcat RCE复现 0X00漏洞简介 该漏洞是由于Tomcat CGI将命令行参数传递给Windows程序的方式存在错误,使得CGIServlet被命令 ...
- Jmeter之存储测试结果
前言 Jmeter做接口测试时,发送请求后,我们可以通过察看结果树看到结果,但是如果想要把测试结果保存起来,那该怎么做呢? 一:添加一个登录的http请求,填入正确的ip,接口地址,以及参数 二:右键 ...
- 基于MySQL+MHA+Haproxy部署高可用负载均衡集群
一.MHA 概述 MHA(Master High Availability)是可以在MySQL上使用的一套高可用方案.所编写的语言为Perl 从名字上我们可以看到.MHA的目的就是为了维护Master ...
- javascript Date对象 js全部的 时间属性 和 方法
Date() 返回当日的日期和时间. getTime() 返回 1970 年 1 月 1 日至今的毫秒数. getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31).天 getDa ...
- apache 负载均衡
此次使用mod_proxy的方式来实现的,因为在Apache2以上的版本中已经集成了,因此不需要再另行安装和配置了. 只需要把注释去掉即可,去掉以下模块的注释: LoadModule proxy_mo ...
- centos7利用系统镜像修复grub
1 故障描述 由于错误操作,导致grub配置文件失效,系统开机后一直卡在下面的画面. 2 解决办法 这时候,就要利用系统镜像光盘,进入修复模式,然后按下面图示操作 进入镜像的shell环境,如下图所示 ...
- F12后面的世界(Elements篇)——重识html
从 淘宝网, 检查元素开始探索之旅. html是什么? hyper text markup language 超文本标记语言,使用标签来描述网页 标签 语义化标签 html5新增标签 什么是超文本? ...
- Pythone是什么鬼?
认识 Python 人生苦短,我用 Python -- Life is short, you need Python 目标 Python 的起源 为什么要用 Python? Python 的特点 Py ...
- Linux文件结构-底层文件访问&文件目录和维护
每个运行中的程序被称为进程(process),它有一些与之关联的文件描述符(一些小值整数).可以通过文件描述符访问打开的文件或设备. 一个程序运行时,一般会有三个文件描述符与之对应 0:标准输入 1: ...
- uniapp简易直播
实验准备 在服务器部署nginx-rtmp作为我们直播推流和拉流的服务器(如果服务商选择七牛,也是直接给地址推流).为了加快部署,我在这一步使用Docker. docker pull tiangolo ...