资讯频道 → Web前端
阅读更多

14顶
0踩

Web前端

原创新闻 7 款令人惊叹的 CSS3 折叠效果

2012-12-03 11:28 by 见习编辑 tyygming 评论(3) 有11172人浏览
折叠效果 CSS3 javascript

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

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

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

1.  Oridomi

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



2.  3D Thumbnail Hover Effect

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



3.  Makisu

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



4.  Paper Like Unfolding Effect

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



5.  Paperfold CSS

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



6.  Folding HTML View

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



7.  Pure CSS Folded Paper Effect

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



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

来源：绝对令人惊叹的CSS3折叠效果
来自: www.gbin1.com
14
顶
0
踩
评论 共 3 条 请登录后发表评论
3 楼 jachinlv 2012-12-14 11:15
确实美丽啊
2 楼 helin 2012-12-04 14:46
最后一句很重要
1 楼 商人shang 2012-12-03 13:59
有没有下载好的啊？给发一个，下载不了，邮箱：henushang@qq.com，谢了啊

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 绝对令人的惊叹的CSS3折叠效果(3D效果)整理

    折纸效果是最近触摸屏幕最流行的一个3D效果，工作原理很简单，只需要轻轻触摸屏幕，它就会直接影响到即将显示出来的内容。这种独特的显示方式绝对可以让用户们眼前一亮！有兴趣的朋友可以阅读一下

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

    折纸效果是最近触摸屏幕最流行的一个3D效果，工作...网站上，曾经共享过几篇关于折叠效果的设 计 文章 ，有兴趣的朋友可以阅读一下。 今天我们带来了更多关于折叠特效的资源，可以帮助你方便的实现这些折叠效...

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

    http://www.oschina.net/news/35360/impressive-paper-folding-effects

  • 十个CSS3动画工具，你必须收藏！

    1、css3Gen - CSS3动画生成器 css3 Gen为你提供了一个易于使用的可以快速生成基本动画的动画生成器。虽然你无法使用它来完成复杂的作品，但是如果你想要不费劲的创建一个标准的动画，这个工具将会是一个很好的选择。...

  • 10个CSS3动画工具，值得你收藏！

    来源：web前端开发人类对于运动的食物往往会投入更多的关注，因此巧妙的使用动画能够极大地提升网站的用户体验，快速唤起用户对重要元素的关注。在css3中引入了全新的动画语法，它能够帮助你在...

  • 10个CSS3动画工具

    10个CSS3动画工具，值得你收藏！ 人类对于运动的食物往往会投入更多的关注，因此巧妙的使用动画能够极大地提升网站的用户体验，快速唤起用户对重要元素的关注。 在css3中引入了全新的动画语法，它能够帮助你在设计...

  • 我收藏了这些CSS3动画工具

    作者：Mr_Liu攻城 https://www.jianshu.com/p/7383e268baae 人类对于运动... 如果你想要使用这个库，你需要有一点关于JavaScript的知识，但它所带来的结果是令人惊叹的，所以这个工具绝对是物超所值的 亲，点这涨工资 

  • svg配合css3动画_如何使用CSS制作节日SVG图标动画

    正是这个季节，因此在本教程中，我将逐步创建一些CSS动画，以假日为主题的SVG图标。 Iconmelon上有一些很棒的图标，该网站上有许多免费的矢量图标集，可让您尽其所能 。 我使用的图标来自设计师Sam Jones 。 因此，...

  • 前端面试题归类-css

    网页看着不方便，想要文档可以私聊我。要是有错别字和错误的地方，请各位大佬直接指出，谢谢啦！！ 盒模型 说下盒模型? 有两种盒模型，W3C盒模型和IE盒模型。...通过 css3 的box-sizing属性，可以更改元素...

  • 深入学习下 CSS 间距相关的知识

    https://ishadeed.com/article/spacing-in-css/如果两个或更多元素接近，则用户将假设它们以某种方式属于...因此，在本文中，我将分享关于 CSS 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。...

  • 原生js图片圆形排列按钮控制3D旋转切换插件.zip

    原生js图片圆形排列按钮控制3D旋转切换插件.zip

  • 类似c++数组的python包

    内含二维数组与三维数组,分别为list2nd,list3rd

  • 原生js颜色随机生成9x9乘法表代码.zip

    原生js颜色随机生成9x9乘法表代码.zip

  • 原生js实现图片叠加滚动切换代码.zip

    原生js实现图片叠加滚动切换代码.zip

  • 【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM）TensorFlow

    【Academic tailor】学术小裁缝必备知识点：全局注意力机制（GAM） 注意力机制是深度学习中的重要技术，尤其在序列到序列（sequence-to-sequence）任务中广泛应用，例如机器翻译、文本摘要和问答系统等。这一机制由 Bahdanau 等人在其论文《Neural Machine Translation by Jointly Learning to Align and Translate》中首次提出。以下将详细介绍这一机制的背景、核心原理及相关公式。 全局注意力机制（Global Attention Mechanism, GAM）由 《Global Attention Mechanism: Retain Information to Enhance Channel-Spatial Interactions》提出，是一篇针对计算机视觉任务提出的方法。这篇文章聚焦于增强深度神经网络中通道和空间维度之间的交互，以提高分类任务的性能。与最早由 Bahdanau 等人提出的用于序列到序列任务的注意力机制 不同，这篇文章的重点是针对图像分类任务，并未专注于序

  • 基于SpringBoot的“篮球论坛系统”的设计与实现（源码+数据库+文档+PPT).zip

    本项目在开发和设计过程中涉及到原理和技术有: B/S、java技术和MySQL数据库等；此文将按以下章节进行开发设计； 第一章绪论；剖析项目背景,说明研究的内容。 第二章开发技术；系统主要使用了java技术， b/s模式和myspl数据库，并对此做了介绍。 第三章系统分析；包罗了系统总体结构、对系统的性能、功能、流程图进行了分析。 第四章系统设计；对软件功能模块和数据库进行详细设计。 第五章系统总体设计；对系统管理员和用户的功能进行描述， 第六章对系统进行测试， 第七章总结心得；在论文最后结束章节总结了开发这个系统和撰写论文时候自己的总结、感想,包括致谢。

  • 毕业设计&课设_iOS 商城项目，含购物与商家管理功能，用 Sqlite，有账号示例，适合 iOS 开发练习.zip

    1、资源项目源码均已通过严格测试验证，保证能够正常运行； 2、项目问题、技术讨论，可以给博主私信或留言，博主看到后会第一时间与您进行沟通； 3、本项目比较适合计算机领域相关的毕业设计课题、课程作业等使用，尤其对于人工智能、计算机科学与技术等相关专业，更为适合； 4、下载使用后，可先查看README.md文件（如有），本项目仅用作交流学习参考，请切勿用于商业用途。

  • 镗夹具总工艺图.dwg

    镗夹具总工艺图

  • 原生js树叶数字时钟代码.rar

    原生js树叶数字时钟代码.rar

Global site tag (gtag.js) - Google Analytics