twitter这款iPad上的应用在表现上做得十分让人欣喜,尤其是当两个手指在某条信息上向外展开时,就可以看到如图所示的效果,当时看到这个效果时,表示十分滴震惊,多么隐蔽的一个功能啊。

看到这么炫的表现,想到现在CSS3的动画以及3D表现,手痒啊,手痒。但在网页中我们是无法让鼠标做到同时相外伸展的效果,无非就是hover或者click之类的触发事件。既然如此,那就做一个鼠标hover到某个区域的时候,让隐藏的部分慢慢折叠展现出来。

先来看一下最终的表现效果,这个涉及到的是CSS3动画和3D表现,记得用webkit内核的浏览器打开,如果是其他内核浏览器,目前来说……你懂的。

>>demo<<

假如你没有webkit内核浏览器,那么就委屈一下。

代码部分很简单,看demo的源代码就明白了,大致是这样的几个思考点:

  1. 折叠部分展开时的动画效果
  2. 折叠的原点设置,能让折叠的部分可以通过z轴或者x轴之类的坐标进行倾斜以及旋转等效果
  3. 设置hover的感应区域

扩展思考:可以考虑将展开的两个部分使用:after和:before两个伪元素来代替div标签使用。

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