绝对令人的惊叹的CSS3折叠效果

2016-02-17 01:45 10 1 收藏

生活已是百般艰难,为何不努力一点。下面图老师就给大家分享绝对令人的惊叹的CSS3折叠效果,希望可以让热爱学习的朋友们体会到设计的小小的乐趣。

【 tulaoshi.com - 平面设计 】

折纸效果是最近触摸屏幕最流行的一个3D效果,工作原理很简单,只需要轻轻触摸屏幕,它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮!在我们的GBin1网站上,曾经共享过几篇关于折叠效果的设计文章,有兴趣的朋友可以阅读一下。

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

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

CSS and Javascript Resources

Oridomi

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

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

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

3D Thumbnail Hover Effect

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

在Codrops这个教程中,让人印象最深刻的就是使用CSS来生成3D缩略图悬停效果。帮助你了解如何制作一款折叠的悬停效果,并提供了四种不同类型供大家选择。

Makisu

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

使jQuery插件生成一个CSS 3D菜单,可以帮助我们自动转换任何列表元素。非常棒一款的3D效果下拉式菜单,独有的滚动折叠效果能够让你的应用更富有吸引力。

Paper Like Unfolding Effect

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

在另一个Codrops教程中,一款不同的折纸教程将展示给大家。这是一个实验性的jQuery插件,它可以帮助你展开画面就像打开一本册子一样,在这里包含了很多内容,有兴趣的可以点击查看。

Paperfold CSS

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

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

Folding HTML View

(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/pmsj/)

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

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

Pure CSS Folded Paper Effect

绝对令人的惊叹的CSS3折叠效果,PS教程,图老师教程网

这不是javascript实现的折叠,也不是任何其它类型的特效,这里展示给我们的是如何让生成渐变背景而产生折叠视觉效果。

再次提醒大家,以上生成的特效内容只在移动设备、Safari或者Chrome环境下支持。并且均不支持IE9浏览器。

希望今天的内容可以带给你们更多的帮助,希望你们喜欢!

来源:http://www.tulaoshi.com/n/20160217/1577338.html

延伸阅读
标签: Web开发
你是否为CSS3中那些形如-moz-border-radius这样冗长的前缀而头晕呢?你是否在考虑跨浏览器使用CSS3的时候,要记住哪些前缀是支持哪个浏览器的?你是否想过有什么办法能一劳永逸的(或者便捷的)解决这些问题? 不用发愁了,Paul Irish与朋友制作了一个有意思的CSS3生成器,在这个页面上你可以实时的编辑CSS3样式,并且立即可以看到效果...
标签: Web开发
CSS3透明不透明渐变随便你怎么叫它吧!这里是一些使用CSS3透明度的指南以及一些例子。 其实这个firefox很久以前就支持了,而IE一直不支持! 上一篇文章:CSS3教程(7):CSS3嵌入字体 opacity声明用来设置一个元素的透明度:层、文字、图片等一个opacity的值为1的元素是完全不透明的,反之,值为0是完全透明的,看不见的。1到0之间的任何值...
标签: Web开发
你们中有许多人可能已经听到过有关CSS3的不少传言,但是我们现在能真正用到的CSS3技巧又有哪些呢?本文,我将向你展示一些 与众不同的CSS3技巧 ,这些技巧在一些主要的浏览器中表现良好(如Firefox,Chrome,Safari,Opera浏览器)。这些效果会在不支持的浏览器中降级渲染(如IE浏览器)。使用浏览器特定的声明,许多提议的CSS3样式都可以马...
标签: Web开发
使用CSS3 HSL声明同样是用来设置颜色的。下一个呢? HSLA? 是的,这个和RGBA的效果是一样的。 上一篇文章:CSS3教程(9):设置RGB颜色 HSL声明使用色调Hue(H)、饱和度Saturation(s)和亮度Lightness(L)来设置颜色。 Hue 衍生于色盘:0和360是红色,接近120的是绿色,240是蓝色。 Saturation 值是一个百分比:0%是灰度,100%饱和度最高 ...
标签: 电脑入门
不少将XP系统升级到Win7系统的朋友初期都会遇到一些不习惯,因此Win7系统在操作方面,会在一些细节方面与XP有所不同,比如最近网友问图老师小编Win7怎么设置让任务栏窗口不折叠了?,对于这个问题,笔者第一次使用Win7也遇到类似困惑,Win7默认打开多个窗口都是折叠在一器,比如我们打开5个网页,在任务栏只看到一个折叠窗口组,如下图: Wi...

经验教程

61

收藏

10
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部