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

需求是给tabbar添加高斯模糊,开始一想简单啊,也是直接给tabbar的容器添加filter不就行了么?可想而知,并没有这么简单,
tabbar是高斯模糊了,可是tabbar后面的流并没有模糊,此时意识到实现这种效果并不简单啊。
我给tabbar添加filter,模糊的当然只是tabbar,后面的内容没有模糊到达人眼的效果也并不是毛玻璃效果。一直理解成生活中的那种模糊,
就是冬天里,进到屋里,眼前就是高斯模糊效果,模糊的也只是镜片,真实的事物也并没有添加filter属性,想当然的认为我只要给tabbar添加filter,不用给流添加filter就行了。
回想之前实现的高斯模糊也是谁要高斯模糊效果,就给谁添加,并不是在他的上面加一层高斯模糊的镜片。
调研了一些H5实现高斯模糊方法,主要也是想办法把需要高斯模糊的元素放到容器里然后让容器高斯模糊。
看了Android实现的效果,感觉确实还是有差距的啊,应该是自己的技术积累不够吧。只能调整UI改透明度了。

一次H5毛玻璃效果有感的更多相关文章

  1. 使用CSS3制作导航条和毛玻璃效果

    导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生一些.简单的说,毛玻璃其实就是让图片或者背景使用相应的方法进行模糊处理.这种效果对用户来说是十分具有视觉冲击力的. 本次分享的主题 ...

  2. 解决css3毛玻璃效果(blur)有白边问题

    做一个登录页,全屏背景图毛玻璃效果,实现方法如下: HTML: <body> <div class="login-wrap"> <div class= ...

  3. Swift 之模糊效果(毛玻璃效果,虚化效果)的实现

    前言: 之前项目中有用到过Objective-C的的模糊效果,感觉很是不错,而且iOS8之后官方SDK也直接提供了可以实现毛玻璃效果的三个类:UIBlurEffect.UIVibrancyEffect ...

  4. iOS模糊效果(毛玻璃效果)的实现

    前一段时间项目中用到毛玻璃效果,那时对UIBlurEffect类和 UIVisualEffectView这两个类做了一部分了解.但当时并没有去特别的深入研究,直到项目做完后,才静下心来好好研究了一番. ...

  5. qt qml fuzzyPanel 毛玻璃效果

    毛玻璃效果,用qml来写代码真是简短,大爱qml:) [下载地址]http://download.csdn.net/detail/surfsky/8426641 [核心代码] Rectangle{ c ...

  6. CSS3中毛玻璃效果的使用方法

    今天在使用icloud的时候看到苹果icloud官网的毛玻璃效果非常赞,仔细研究了一下它的实现方式,是使用js配合background-image: -webkit-canvas的形式绘制出的毛玻璃背 ...

  7. 【CSS】梯形、平行四边形导航条与毛玻璃效果【转】

    转载出处:http://www.cnblogs.com/Uncle-Keith/p/5943158.html 代码部分有小改动. 导航条对于每一个Web前端攻城狮来说并不陌生,但是毛玻璃可能会相对陌生 ...

  8. iOS开发小技巧--实现毛玻璃效果的方法

    一.美工出图 二.第三方框架 -- DRNRealTimeBlur,框架继承自UIView.使用方法:创建UIView直接继承自框架的View,就有了毛玻璃效果 三.CoreImage -- 图片加高 ...

  9. android 开发 - 对图片进行虚化(毛玻璃效果,模糊)

    概述 IPAD,IPHONE上首页背景的模糊效果是不是很好看,那么在 Android中如何实现呢.我通过一种方式实现了这样的效果. 开源库名称:anroid-image-blur 一个android ...

随机推荐

  1. .Net Core中IOC容器的使用

    打代码之前先说一下几个概念,那就是什么是IOC.DI.DIP 虽然网上讲这些的已经有很多了,我这里还是要再赘述一下 IOC容器就是一个工厂,负责创建对象的 IOC控制反转:只是把上端对下端的依赖,换成 ...

  2. yukongDSRM账户安全防护

    一.DSRM简介 1.DSRM(Diretcory Service Restore Mode,目录服务恢复模式)是windows域环境中域控制器的安全模式启动选项.域控制器的本地管理员账户也就是DSR ...

  3. Jmeter之安装与环境配置

    前言 本次的教程是Jmeter的安装与配置 1.安装JDK并配置好环境变量,在系统变量中添加JAVA_HOME变量 在系统变量path中添加 %JAVA_HOME%\bin 2.打开Jmeter官网: ...

  4. Window10和Ubuntu 18.04双系统安装的引导问题解决

    作为码农 首先,建议了解下grub2的启动顺序和逻辑.可以参考这篇文章,grub.cfg详解. 从执行顺序倒推,如下如果全部执行成功,则会进入grub的启动菜单:如果最后一步,没有找到grub.cfg ...

  5. NR / 5G - MAC Scheduler

  6. Spring Boot 2.1.7 启动项目失败,报错: "Failed to configure a DataSource: 'url' attribute is not specified and no embedded datasource could be configured."

    一开始按照网上的很多解决办法是: 启动类头部声明@SpringBootApplication(exclude= {DataSourceAutoConfiguration.class}),但是这样会排除 ...

  7. Java TreeMap使用方法

    1.使用默认的TreeMap 构造函数,其中key值需要有比较规则. 2.使用默认的TreeMap 构造函数,Key中添加自定义类型,自定义类型必须继承Comparator. 3.使用比较器类来来实现 ...

  8. Python学习(杂)

    Python学习 两个for 循环同时输出+正则文章 zip(list1,list2) zip函数同时便利两个列表 import sys import requests import re from ...

  9. C语言基础二 练习

    指出正确标识符 命名 l 只能由26个英文字母的大小写.10个阿拉伯数字0~9.下划线_组成 l 严格区分大小写,比如test和Test是2个不同的标识符 l 不能以数字开头 l 不可以使用关键字作为 ...

  10. C++ char to string 方法

    1. 使用string()构造函数方法 //method 1: the constructor of string() char c = 'F'; , c); cout << s ; 2. ...