一直在想,家里如果以后能大修一次的话,一定要放布置一堵照片墙,哇塞,超好看~~~ (⊙o⊙)

说到照片就想到photo gallery,把照片放到网上,再用些小技术,呈现出不一样的精彩。O(∩_∩)O

照片墙demo1图片

思前想后做出了这样一个效果(温馨提示:请用Chrome看哦~)。首先展现的是照片的背面,都是黑压压的一片,然后鼠标hover上去以后照片会翻回正面(PS:照片做的还很像拍立得,因为一直很想要装小清新,但是一直没下决心去买╮(╯▽╰)╭)

photowall1

这种效果的灵感是源自于大前端的读者墙~~~谢谢浩子间接的给灵感~~~

想要具体的代码解释的话请看浩子的文章~~谢谢~~~

一开始做完挺满意的,后来越看越丑。。。而且感觉非常像连。连。看。那种考记性的消除游戏,鸡皮疙瘩都起来了。于是一不做二不休用我非常非常非常贫瘠的JS水平写了一个这样的效果。

photowall2

看着还是挺廉价的,人家我水平不过关呢,反正就把大概个意思做出来了,想到了好久没玩的游戏,挺怀念的。hoho~

不过好像偏题了。。。

再回到照片墙。黑压压的一片真的很难演示。。。于是它就变成了这个样子。

photowall3(用键盘上的向左和向右键操作)

它就滚来滚去了,这个跟制作PPT的原理是一样的,就是靠transition和margin来完成。

虽然可以做的再精致一点,不过已经身心俱疲了。。。下次再探索CSS3吧

本文作者:admin 转载请注明来自:携程设计委员会