一次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 ...
随机推荐
- 《C# 爬虫 破境之道》:第二境 爬虫应用 — 第四节:小说网站采集
之前的章节,我们陆续的介绍了使用C#制作爬虫的基础知识,而且现在也应该比较了解如何制作一只简单的Web爬虫了. 本节,我们来做一个完整的爬虫系统,将之前的零散的东西串联起来,可以作为一个爬虫项目运作流 ...
- 【C++】随机数引擎
rand() 基本:使用随机数时,经常见到的是C标准库提供的函数rand(),这个函数会生成一个0到RAND_MAX之间的一个整形数: 分布:为了得到一个给定范围内的随机数,通常会对生成的随机数取余: ...
- Unity酱~ 卡通渲染技术分析(二)
前面的话 上一篇Unity酱~ 卡通渲染技术分析(一) 写了CharaMain.cginc,服装的渲染是怎么实现的.这篇来分析一下头发跟皮肤的实现 头发 本来以为unitychan的头发会有各向异性的 ...
- centos7使用MySQL的Yum存储库安装mysql5.7.27
下载yum源 官网地址:http://dev.mysql.com/downloads/repo/yum/ centos7系统: http://dev.mysql.com/get/mysql57-com ...
- oracle表空间位置迁移
1.先登录sqlplus: C:\Documents and Settings\jbdu>sqlplus “/as sysdba”2.修改表空间为Offline: SQL> alter t ...
- sublime笔记
插件安装和使用 首先,要安装package control,按照官方方法安装: https://packagecontrol.io/installation 重启Sublime Text 3. 如果在 ...
- K8S ConfigMap使用
k8s系列文章: 什么是K8S configmap是k8s的一个配置管理组件,可以将配置以key-value的形式传递,通常用来保存不需要加密的配置信息,加密信息则需用到Secret,主要用来应对以下 ...
- MySql基础补漏笔记
在MySQL教程|菜鸟教程系统复习的时候有一些知识点还没掌握透的或者思维方式还没完全跟上的地方,写了一个笔记,讲道理此笔记对除我之外的任何读者不具有任何实用价值,只针对我在复习MySQL基础过程中的查 ...
- HA: Chanakya Vulnhub Walkthrough
靶机链接: https://www.vulnhub.com/entry/ha-chanakya,395/ 网络主机探测: 主机端口扫描: nmap -p- -sC -sV 10.10.202.136 ...
- Java基础之三、类的特性和接口
类的派生.多态.抽象类.接口 1:派生-extends 派生就是继承已有类非私有的字段和方法等创建新的类,还可以添加.重写字段和方法: 在类的派生中,构造函数不可以被继承: 派生源的类-父类/基类/超 ...