> 웹 프론트엔드 > H5 튜토리얼 > 微信京东购物顶部的动态模糊是怎么实现的呢?

微信京东购物顶部的动态模糊是怎么实现的呢?

WBOY
풀어 주다: 2016-06-07 08:43:07
원래의
1785명이 탐색했습니다.

回复内容:

泻药
其实你自己可以开页面看看样式的……
就是……
-webkit-backdrop-filter:blur(xxx)
它是……
Safair 9 特性……
iOS 9 开始支持…… 这个其实很简单,根据滚动条位置设置顶部的opacity jsbin.com/nukika/edit?
搜索引擎会不会用?
自己搜一搜会不会?
独立解决问题行不行?
不行就别当程序员了。 这个不叫动态模糊,PS里面有种特效叫动态模糊,这个就是透明度,opacity。可以f12查看源代码。 blur.js 是一个用来实现元素的半透明效果的jQuery 插件,你可以试试做 反对@Galen
微信京东购物顶部的动态模糊是怎么实现的呢?

普通的opacity是做不到ios和mac上的那种舒服的毛玻璃效果的。用白色半透明的方法得不到这样的感觉的。普通设备的css的话通用使用blur,blur的是自身背景 不是blur透视过去的背景。两者完全不一样的。一个发散了像素一个很明显没有。一个blur的遮盖层不是blur透过去的内容。图片用下面的同一张图片然后通过backgroundposition来做动态。这样就可以做到一半blur一半不blur。但是就不适用于楼主给的例子这种情况:要blur的不是一个图片 而是一段内容。所以也只有在ios上面能用@貘吃馍香给的方法。应用在别的页面上兼容就是个问题。
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿