阅读更多

14顶
0踩

Web前端

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

2012-12-03 11:28 by 见习编辑 tyygming 评论(3) 有11149人浏览
折纸效果是最近触摸屏幕最流行的一个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 中的间距、实现该间距的不同方法以及何时使用填充或边距的所有信息。...

  • 1446-基于51单片机的气压检测(MPX4115,上位机,LCD)proteus,原理图、流程图、物料清单、仿真图、源代码

    1446-基于51单片机的气压检测(MPX4115,上位机,LCD)proteus,原理图、流程图、物料清单、仿真图、源代码 资料介绍: 1、使用气压传感器MPX4115检测气压 2、利用LCD1602显示气压 3、把气压值上传到上位机 有哪些资料: 1、仿真工程文件 2、源代码工程文件 3、原理图工程文件 4、流程图 5、功能介绍 6、元件清单 7、上位机软件 8、演示视频

  • 8051Proteus仿真c源码用定时器T0的中断实现长时间定时

    8051Proteus仿真c源码用定时器T0的中断实现长时间定时提取方式是百度网盘分享地址

  • 威纶通HMI登陆方式(二):索引密码登陆

    通过用户参数设置、高级安全模式控制地址的使用以及用户登陆界面的设计实现威纶通HMI索引密码登陆。

  • 基于yolov8的抽烟检测系统python源码+onnx模型+评估指标曲线+精美GUI界面.zip

    【测试环境】 windows10 anaconda3+python3.8 torch==1.9.0+cu111 ultralytics==8.2.70 【模型可以检测出类别】 cig-pack smoke 更多实现细节参考博文:https://blog.csdn.net/FL1623863129/article/details/141964642

  • epoll+线程池实现的高并发服务器

    epoll+线程池实现的高并发服务器

  • c++ege生命游戏代码

    c++ege生命游戏代码,在EGE环境下运行

  • 2024年高教社杯全国大学生数学建模竞赛题目C题.zip

    2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip2024年高教社杯全国大学生数学建模竞赛题目C题.zip

  • 华为最新射频通信类 招聘笔试题.docx

    干货 加详细答案解析-试题目主要涉及无线通信和射频设计的核心概念,包括信道容量、调制方式、噪声系数、S参数、功率放大器特性、微带传输线、频谱仪设置、巴伦电路、Smith圆图以及天线辐射方向图。此外,还包括5G技术的关键点,如Massive MIMO、毫米波通信、波束赋形、网络切片和边缘计算。你需要了解这些技术的基本原理、应用及其对无线通信系统的影响。

  • 基于Spring Boot框架的分布式任务管理系统.zip

    基于Spring Boot框架的分布式任务管理系统 内容概要 本项目是一个基于Spring Boot框架的分布式任务管理系统,旨在通过uwtask包快速构建分布式任务体系。系统支持定时任务、队列任务、RPC调用等多种任务类型,并提供任务运维监控和报警功能。主要依赖包括RabbitMQ、MySQL、Redis和InfluxDB。 适用人群 后端开发人员 分布式系统架构师 运维工程师 使用场景及目标 分布式任务管理支持在混合云环境中指定主机或集群运行任务。 定时任务调度通过cron表达式配置定时任务,并支持服务端动态配置。 队列任务分发基于队列分发任务,支持错误重试和服务端动态配置。 RPC调用支持RPC风格调用,提供错误重试和服务端动态配置。 任务监控与报警基于InfluxDB的任务运维监控和报警设置。 主要特性 1. 完全分布式支持混合云环境,可指定主机或集群运行任务。

Global site tag (gtag.js) - Google Analytics