还是先看效果图:
静态效果图.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浏览器测试
如果觉得《用html实现模糊效果 纯html css实现动态高斯模糊效果(第二弹) 实现导航条动态模糊内容...》对你有帮助,请点赞、收藏,并留下你的观点哦!