偶然看到github
的404
页面,没想到github
的404
页面也是做的很有心,就试着找了下源码,打算仿一下这个效果。
这个效果看上去是3d
的,其实没有用到css3
里边的任何一个与3d
有关的属性,这个页面应该在很早之前就被做出来了,可能那时的css3
兼容性还没现在这么好。这个页面是借用图片错位,以及图片运动速度不一致,给人一种立体感。下边先看下html
结构:
|
|
图片从网站上下载,就放成这样的结构。现在的图片还是平铺在页面上,我们用position: absolate
和z-index
使得图片放在一个合适的位置,确定它们的前后顺序。
背景图片需要拉伸宽于屏幕一些,因为背景图也是随鼠标的移动而左右移动的。下边是图片的数据结构:
|
|
首先我们先将图片放到起始的位置,即模拟鼠标放在屏幕中心位置的时候。页面首次加载鼠标不在浏览器中时就以这种方式布局图片。
|
|
图片在场景中的位置是按照鼠标在浏览器中的位置来按比例移动的。鼠标移动的时候改变图片的top
和left
值来使图片移动。离我们近的物体的移动方向和鼠标的滑动方向相同,离我们远的物体移动方向和鼠标滑动方向相反。而且离中间的点的距离越远,移动速度越快,使其具有立体感。
图片的scale
属性就是用来设置图片的移动速度的,即鼠标移动的距离乘以这个比例就是图片移动的距离。isFont
属性是图片移动的方向,确定图片与鼠标移向相同或相反。监听鼠标移动事件,每次移动都重新定位图片位置。
到这里github404
页面的效果就算是做好了,可以点击这里预览最终效果,你也可以在github直接查看源码。如果你有兴趣,欢迎在下方留言讨论。