Medium 主页类似 iOS 7 live blur 的高斯模糊效果是如何实现的？

作者：匿名字体：[增加减小] 来源：互联网时间：2018-12-03

本文主要包含Medium等相关知识,匿名希望在学习及工作中可以帮助到您

滚动下滑之后，首页顶部图片的高斯模糊的动画效果。

Medium

回复内容：

先用 canvas，然后 fallback 到用两张图片，一张正常，一张模糊。这里有两个Medium Scroll Effect，建议都可以参考一下：

Medium Scroll Effect
Medium.com style header effect

简单的做法是用CSS filter blur，只是浏览器有兼容问题，所以可以再fallback到svg/canvas/image 应该是用了某个库可以把元素的内容在canvas上绘制，并通过算法加以blur。苹果官方有demo的使用coreimage的滤镜或者coregraphics就可以实现

您可能想查找下面的文章:

相关文章