偶然看到github的404页面，没想到github的404页面也是做的很有心，就试着找了下源码，打算仿一下这个效果。

这个效果看上去是3d的，其实没有用到css3里边的任何一个与3d有关的属性，这个页面应该在很早之前就被做出来了，可能那时的css3兼容性还没现在这么好。这个页面是借用图片错位，以及图片运动速度不一致，给人一种立体感。下边先看下html结构：

图片从网站上下载，就放成这样的结构。现在的图片还是平铺在页面上，我们用position: absolate和z-index使得图片放在一个合适的位置，确定它们的前后顺序。

html, body {

height: 100%;

margin: 0;

padding: 0;

}

#field {

position: absolute;

top: 0;

left: 0;

overflow: hidden;

width: 100%;

height: 370px;

}

.img_bg {

position: absolute;

top: -11px;

left: -20px;

width: 120%;

height: 425px;

}

.img_text {

position: absolute;

z-index: 8;

}

.img_cat {

position: absolute;

z-index: 7;

}

.img_speeder {

position: absolute;

z-index: 6;

}

.img_cat_shadow {

position: absolute;

z-index: 5;

}

.img_speeder_shadow {

position: absolute;

z-index: 4;

}

.img_building_1 {

position: absolute;

z-index: 3;

}

.img_building_2 {

position: absolute;

z-index: 2;

}

背景图片需要拉伸宽于屏幕一些，因为背景图也是随鼠标的移动而左右移动的。下边是图片的数据结构：

window.onload = function() {

var window_width, window_height,

field_width, field_height,

rate_w, rate_h,

field, text, cat, cat_shadow, speeder, speeder_shadow, buliding_1, building_2;

window_width = document.body.clientWidth;

window_height = document.body.clientHeight;

field = document.getElementById('field');

field_width = field.offsetWidth;

field_height = field.offsetHeight;

rate_w = field_width / window_width;

rate_h = field_height / window_height;

var imgArray = {

bg : { left: -780, top: -200 ,scale: 0.06, isFont: false },

text : { left: -500, top: -120, scale: 0.03, isFont: true },

cat : { left: -200, top: -100 ,scale: 0.02, isFont: true },

cat_shadow : { left: -189, top: 100 ,scale: 0.02, isFont: true },

speeder : { left: -70, top: -40 ,scale: 0.01, isFont: true },

speeder_shadow : { left: -70, top: 75 ,scale: 0.01, isFont: true },

building_1 : { left: 20, top: -111 ,scale: 0.03, isFont: false },

building_2 : { left: 300, top: -60 ,scale: 0.05, isFont: false },

};

}

首先我们先将图片放到起始的位置，即模拟鼠标放在屏幕中心位置的时候。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。

(function() {

for( i in imgArray ) {

var theImg = document.getElementsByClassName("img_" + i)[0];

var offset_w = rate_w * window_width / 2 * imgArray[i].scale;

var offset_h = rate_h * window_height / 2 * imgArray[i].scale;

if( imgArray[i].isFont == true ) {

theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";

theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";

} else {

theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";

theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";

}

}

})();

图片在场景中的位置是按照鼠标在浏览器中的位置来按比例移动的。鼠标移动的时候改变图片的top和left值来使图片移动。离我们近的物体的移动方向和鼠标的滑动方向相同，离我们远的物体移动方向和鼠标滑动方向相反。而且离中间的点的距离越远，移动速度越快，使其具有立体感。

图片的scale属性就是用来设置图片的移动速度的，即鼠标移动的距离乘以这个比例就是图片移动的距离。isFont属性是图片移动的方向，确定图片与鼠标移向相同或相反。监听鼠标移动事件，每次移动都重新定位图片位置。

var picMove = function(pageX, pageY) {

for( i in imgArray ) {

var theImg = document.getElementsByClassName("img_" + i)[0];

var offset_w = rate_w * pageX * imgArray[i].scale;

var offset_h = rate_h * pageY * imgArray[i].scale;

if( imgArray[i].isFont == true ) {

theImg.style.left = field_width / 2 + offset_w + imgArray[i].left + "px";

theImg.style.top = field_height / 2 + offset_h + imgArray[i].top + "px";

} else {

theImg.style.left = field_width / 2 - offset_w + imgArray[i].left + "px";

theImg.style.top = field_height / 2 - offset_h + imgArray[i].top + "px";

}

}

}

document.body.onmousemove = function(e) {

picMove(e.pageX, e.pageY);

};

到这里这个特效就算做完了，如果你有兴趣，这里是我的博客以及github地址，欢迎来访。