最美H5 酷站欣赏 UI素材 专题 设计导航

7 款令人惊叹的 CSS3 折叠效果

折纸效果是最近触摸屏幕最流行的一个3D效果,只需要轻轻触摸屏幕,它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮! 

今天我们带来了一些关于折叠特效的资源,可以帮助你方便的实现这些折叠效果。注意,这里使用CSS 3D来进行效果变换,如缩放、倾斜、旋转等等。 

Oridomi

这是一个独立的JavaScript插件,它们可以生成像纸一样的折叠效果。此类库不依赖于任何其它JavaScript框架(但对于jQuery可以有选择性支持),并使用CSS 3D创建过渡效果。 

3D Thumbnail Hover Effect

帮助你制作一款折叠的悬停效果,并提供了四种不同类型供大家选择。 

 

Makisu

非常棒的一款3D效果下拉式菜单,独有的滚动折叠效果能够让你的应用更富有吸引力。 

Paper Like Unfolding Effect

这是一个实验性的jQuery插件,它可以实现打开册子的效果。 

Paperfold CSS

这应该是最早的折叠效果案例,在这个插件中只需要一个DOM元素,将它分割成几个部分,再将它们重新组合,看上去就好像3D折叠效果一样。 

Folding HTML View

一个超棒的折叠效果展示! 

Pure CSS Folded Paper Effect

这不是JavaScript实现的折叠,也不是任何其它类型的特效,而是使用纯CSS生成渐变背景来产生折叠视觉效果。 

需要注意的是,以上特效只在移动设备、Safari或者Chrome环境下支持,并且均不支持IE9及之前版本。 

 

Web 前端开发者必知的9 个 CSS 属性

标签: