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

还是先看效果图：

静态效果图.png

GIF.gif

页面布局：

顶部高斯模糊导航条

页面主体

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

第一步，将页面主体内容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时候再移除掉

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