开启辅助访问勋章商城切换到宽版

o(￣ヘ￣o＃) 任务菌(`へ´*)ノ懒人通道_(:3」∠)_签到领奖官方微博紧急反馈中心

有爱，有技术，有你^_^)y

技术宅社区 | Z站»家 › 历史 › 1编程教学资源共享 › 分享几个好看的css/js折叠效果~

发新帖

查看: 1362|回复: 14

收起左侧

[css] 分享几个好看的css/js折叠效果~

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

32 主题	26 好友	1万积分

积分: 12772

发表于 2013-1-24 21:23:51 | 显示全部楼层 |阅读模式

╱人◕‿‿◕人╲定下契约

您需要登录才可以下载或查看，没有账号？╱人◕‿‿◕人╲订下契约（注册新用户）

x

本帖最后由 fenxer 于 2013-1-24 21:25 编辑

搬运前说明一下、以下特效只在移动设备、Safari或Chrome、FireFox等环境下支持，并且均不支持IE9及之前版本（或者说效果差了很多）。。。嘛嘛、要与时俱进嘛~还有哦、下面的一般都可以在github里翻到、翻不到的童鞋也可以谷歌一下~毕竟是搬运的~~

（捂脸跑。。。）
////////////////////////////////////////////////////////////////////

1. Oridomi

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

2. 3D Thumbnail Hover Effect

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

3. Makisu

非常棒的一款3D效果下拉式菜单，独有的滚动折叠效果能够让你的应用更富有吸引力。（Navi栏一道亮丽的风景线啊~

）

4. Paper Like Unfolding Effect

这是一个实验性的jQuery插件，它可以实现打开册子的效果。（以前见过、但是条件苛刻啊。。咳咳

）

5. Paperfold CSS

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

）

6. Folding HTML View

不多说。。

7. Pure CSS Folded Paper Effect

非JS、也不是任何其它类型的特效，而是使用纯CSS生成渐变背景来产生折叠视觉效果。（box-shadow啊、伟大的CSS3啊~

）

【说在后面的：请无视水印君吧！！

】

评分

参与人数 1	宅币 +10	收起理由
原味板烧鸡腿堡	+ 10

查看全部评分

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复

使用道具举报

该用户从未签到

1 主题	22 好友	9273 积分

积分: 9273

发表于 2013-1-24 21:29:06 | 显示全部楼层

谢谢卤煮分享~好看！

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

12 主题	120 好友	1万积分

积分: 10872

发表于 2013-1-24 21:30:53 | 显示全部楼层

刚好3月份新网站素材可以用到~~感谢~~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

签到天数: 3 天

连续签到: 1 天

[LV.2]偶尔看看I

13 主题	45 好友	2万积分

积分: 23922

发表于 2013-1-24 21:48:46 | 显示全部楼层

这个果断要Mark

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

21 主题	63 好友	1万积分

积分: 18553

发表于 2013-1-24 23:20:58 | 显示全部楼层

果断c2c了

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

2012好想回家

该用户从未签到

235 主题	249 好友	5万积分

技术宅认证程序员

积分: 52156

发表于 2013-1-24 23:53:58 | 显示全部楼层

好棒~果断mark一个

❤钱伯我的爱！组长一生推❤

回复支持反对

使用道具举报

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

98 主题	213 好友	4万积分

积分: 44857

发表于 2013-1-25 10:50:00 | 显示全部楼层

收了~~~

为世界和平~~~干吧呆<(‵□′)/

回复支持反对

使用道具举报

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

98 主题	213 好友	4万积分

积分: 44857

发表于 2013-1-25 10:51:08 | 显示全部楼层

0.....还有不支持的。。。

还有
好像没写分享地址哇~~

为世界和平~~~干吧呆<(‵□′)/

回复支持反对

使用道具举报

签到天数: 1 天

连续签到: 1 天

[LV.1]初来乍到

32 主题	26 好友	1万积分

积分: 12772

楼主| 发表于 2013-1-25 12:26:26 | 显示全部楼层

噢！麦嘎发表于 2013-1-25 10:51

登录/注册后可看大图

0.....还有不支持的。。。还有
好像没写分享地址哇~~

刚开始说了、github一般都能搜到吧。谷歌css折叠效果也能找出原文~

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

至尊麻辣螃海

该用户从未签到

2 主题	13 好友	3403 积分

积分: 3403

发表于 2013-6-29 16:05:17 | 显示全部楼层

感谢卤煮分享

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

1 主题	0 好友	874 积分

积分: 874

发表于 2013-7-23 12:40:01 | 显示全部楼层

屌了这个，收藏！

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

消逝在天际

该用户从未签到

2 主题	7 好友	1626 积分

积分: 1626

发表于 2013-12-7 00:44:34 | 显示全部楼层

毕设要做网页觉得要死了……特效晃瞎导师算了。。。。

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

1 主题	7 好友	1888 积分

积分: 1888

发表于 2013-12-9 21:26:43 | 显示全部楼层

good！

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复

使用道具举报

该用户从未签到

4 主题	13 好友	1922 积分

积分: 1922

发表于 2014-6-29 20:37:08 | 显示全部楼层

很好很强大只是很少能用上至少我是用不了的额

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

该用户从未签到

3 主题	23 好友	7214 积分

积分: 7214

发表于 2015-8-5 17:43:03 | 显示全部楼层

效果图挺炫！！

签名被小宅喵吞掉了~~~~(>_<)~~~~

回复支持反对

使用道具举报

发新帖

小黑屋|手机版|技术宅（基宅） ( 粤ICP备18082987号-1 | 浙公网安备 33010902001746号 )

GMT+8, 2024-5-2 21:19 , Processed in 0.345290 second(s), 42 queries , Redis On.

Copyright © 2018 技术宅社区

Powered by Discuz! X3.5

快速回复 返回顶部 返回列表