纯html css实现动态高斯模糊效果（第二弹），实现导航条动态模糊内容

还是先看效果图：

静态效果图.png

GIF.gif

页面布局：

• 顶部高斯模糊导航条
• 页面主体

在线demo:https://lucienyang.github.io/blur_nav/
建议使用chrome浏览器，其他浏览器我没测过

导航条动态高斯模糊实现原理

第一步，将页面主体内容clone到navbar中，然后使用css3 -webkit-filter滤镜对内容做高斯模糊
第二部，监听页面滚动事件，计算出scrollTop，将navbar中的内容做同步滚动，同步滚动使用的方法是transform下面的translateY样式，对Y轴做同步偏移

代码片段如下：

    var duplicate = $(".mainContent").clone();
    var contentBlurred = $("
");
    $(contentBlurred).append(duplicate);
    $(contentBlurred).addClass('content-blurred');
    $("#header").append(contentBlurred);
    var translation;
    $(window).bind("scroll", function(){
        var top = $(this).scrollTop(); // 当前窗口的滚动距离
        translation = 'translateY(' + (-top + 'px') + ')';
        $(duplicate).css({"-webkit-transform":translation,"-moz-transform":translation,"transform":translation});
    });

内容图片动态高斯模糊实现原理

鼠标mouseover时候，对img标签加上 -webkit-filter滤镜样式，mouseleave时候再移除掉

---

有兴趣的盆友，可以去我的github上下载源码，喜欢的话给个star~https://github.com/LucienYang/blur_nav

以上只是从技术上验证了一种可能性，目前并未考虑性能，以及浏览器兼容性，我用的是Chrome浏览器测试