zoukankan      html  css  js  c++  java
  • 一次H5毛玻璃效果有感

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

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

  • 相关阅读:
    Python接口自动化之request请求封装
    AI缘起——达特茅斯会议
    AirtestProject测试框架
    强化学习落地:竞态场景下基于锁机制的闲置端口查用
    多智能体强化学习入门Qmix
    代码回滚----git reset 和 git revert 使用
    requestAnimationFrame
    深度剖析-事件循环event
    Ubuntu18.04安装ES也就是ELK
    Ubuntu18.04+kafka
  • 原文地址:https://www.cnblogs.com/aloneCode/p/10901728.html
Copyright © 2011-2022 走看看