html5仿mac商城css,纯html css实现动态高斯模糊效果（第一弹），实现了类似mac os桌面...

先看下效果：

desktop.png

整个页面分为：

顶部工具栏(实现了高斯模糊)

桌面区

开始菜单(实现了高斯模糊)

通知区(实现了高斯模糊)

底部dock(实现了高斯模糊)

桌面展示

GIF.gif

开始菜单和通知区展示

GIF3.gif

其实原理就是把桌面截了个屏然后再做高斯模糊，覆盖在原来的的桌面上截取部分作展示，也就其实是两层图片

用到的js库如下

html2canvas 一个纯前端js工具用来将页面截取成一个图片

StackBlur 使用canvas技术做高斯模糊的js工具，挺好用

核心代码

var width = $(window).width();

var height = $(window).height();

html2canvas($('#desktop'), {

onrendered: function(canvas) {

StackBlur.canvasRGB(canvas, 0, 0, width, height, 20);

var canvasUtil = new CanvasUtil();

$("#startMenuImg").html('').append(canvasUtil.convertCanvasToJPEG(canvas,0.8));

$("#startMenu").slideLeftShow(300);

},

width: width,

height: height

});

分为三个步骤

利用html2canvas将一个层里的所有内容转换成canvas对象

利用stackblur工具将canvas对象做高斯模糊

将canvas转换成图片填充目标层中

当然，做的这个东西是建立在对性能，对浏览器兼容性等等都不考虑的情况下的一个尝试，目前在chrome下测试效果完全没有问题，在IE下好像不太理想，HTML5性能不好

注意，只能部署在服务端使用(例如部署在tomcat里)，因为html2canvas只能识别本地路径