纯CSS3实现的纸张褶起动效

于 2014-10-23 22:54:11 发布
阅读量4.7k 收藏 3
点赞数
分类专栏： html5 文章标签： HTML5 纸张 褶起 CSS3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/iefreer/article/details/40406893
版权

这是一个简单但设计精巧的纸张摺起动效，由纸张DIV的before和after两个伪元素所构建。

这两个伪元素使用绝对定位，置于纸张box DIV元素的底部，

鼠标悬停时加上skew、shadow和transition CSS3样式，形成下边角缓缓褶起的视觉效果。


代码和在线演示地址：http://wow.techbrood.com/fiddle/1917

陈小峰_iefreer
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
博客
Stone教程：一行代码就可以把3D场景植入到普通网页中
10-22 2569
踏得网的Stone工具可以帮助用户快速构建3D场景，场景可以在Stone工具内编辑、播放、保存和重新加载。如果想把在Stone工具中制作的场景放到现有的网页中，也很简单，只需要2步。Stone提供了一个运行时库tds_rt.js，（tds_rt全称为techbrood stone runtime)链接地址为：https://techbrood.com/stone/tds_rt.js，第一步是把该js库加载到页面中：<script src="https://techbrood.co.
博客
踏得网发布轻量级网页3D编辑器Stone，可用于快速制作沉浸式网页应用
10-09 2157
从表现形态上来看，互联网已经走过了3个大的阶段。第一个阶段是简单文本信息的分享，源于学术之间文档的共享需求，然后普及到普通用户对于新闻获取和知识搜索方面的需求。第二个阶段是富媒体交互，在这个阶段网页的内容不再局限于文本，而是图文并茂、乃至音频视频动画。而在交互上也不只是被动的接收，而有了更多的交互和动效，这使得电商等众多网页应用和网页游戏成为可能。第三个阶段是信息载体的变化，从桌面走向了移动，催生了移动互联网时代。而现在互联网内容将走入第四个关键的阶段，即沉浸式互联网时代。沉浸式互联网和
博客
Three.js 中文文档和在线演示实例
06-16 9万+
Three.js是当下最流行的网页3D渲染JS引擎，其主要是对WebGL编程以面向对象方式进行的封装。踏得网专注于HTML5技术生态链的资源开发，鉴于网络上Three.js方面的资料比较散乱，且良莠不齐，因此我们把Three.js的官方文档、示例和我们的平台上已有资源整合起来，提供在线中文文档以及方便的调试学习环境。
博客
vite dev开发模式下支持外部模块引用
10-06 516
vite build通过rollupOptions.external来支持外部模块，可是这对vite dev模式不工作。一个临时解决方法是使用插件vite-plugin-externalize-dependencies。
博客
iOS播放MP3视频流AudioContext解码报错null问题处理
09-22 306
web中的媒体流是html5以后才引入的新的不断发展的技术，中间还经历了layer1，layer2和layer3标准。解码器不应该关心未知数据，解码器应该只是寻找，直到它找到它理解的和可以解码的标识。iOS设备的AudioContext对于Mpeg1,2,3数据流的编解码容错性支持不好，需要frame数据都是完整的（从头部边界开始）。mp3或mp2的每个音频帧（每大约200字节）的所有起始标头为0XFFE，而acc音频为0XFFF，因此可以使用0XFFE来做为同步标识。
博客
http请求header中设置的数据未能发送成功
07-14 280
通过在cookie中设置user token来实现用户请求鉴权是常见的方式，但cookie设置会遇到跨域的问题，这个时候可以在header中加user token来传递数据，而服务端返回的user token放在localstorage中。但在header中添加自定义数据时，需注意规避使用下划线，因为nginx服务器默认是把下划线禁用的，也就是header中带下划线的字段会被自动过滤，导致请求丢失了该字段。比如，如果token的名字是user_token，或者user_id，都会出现丢失问题。
博客
THREE .DRACOLoader: Unexpected geometrytype 错误解决
06-08 512
是因为three.js升级到152版本以上，需要相应升级draco库到1.5.6+。加载glb（压缩过的）文件时，遇到这个问题。
博客
git删除本地分支和远程分支
06-17 418
git删除本地分支和远程分支
博客
Stone教程：如何在普通网页中处理Stone 3D场景中实体交互事件
04-17 1126
如果是通过stone 3d运行时库集成到普通网页中，有可能会需要处理场景中物体的交互事件来实现一些自定义的行为，最常见的是点击、悬停等事件交互。这可以通过在stone 3d容器中侦听如下事件来实现：tds_ev_entity_pointerdown （点击） tds_ev_entity_pointerover （悬停）举例如下，假设stone_div是3d场景容器的id：var cont = document.getElementById('stone_div')cont.a...
博客
Stone 3D教程：常用的可建构实体造型功能（合并、相交和相减）
03-10 1141
常用的实体造型功能一般包括对两个（或多个）几何体进行合并、相交和相减。合并是取两个模型的并集，即非重叠部分保留且重叠部分的体素只取其中一个。相交是取两个模型的交集，即只保留相交部分的体素。相减是取两个模型的体素差，显然有顺序，即A-B和B-A是不同的。举例而言，我们要在一个立方体的一个侧面挖出一个坑，具体步骤如下：1. 首先新建一个大的立方体，和一个小的球体，然后把小的球体移动到立方体的上方并部分的陷入立方体中。2. 然后按住CTRL键，通过鼠标点击界面右侧场景树中的几何体来选择两个
博客
Stone教程：如何给网页3D应用程序添加交互热点
03-09 992
网页3D应用程序中一个常见的交互行为是用户点击场景中的某个热点，然后呈现特定的内容，如视频、音频、对话框；或者进行场景切换。本教程说明如何在Stone工具中轻松实现这样的热点交互。在左侧工具栏实体添加子栏目中，有一个灯泡状的图标按钮，如下所示：使用该按钮可以向场景中添加热点信息。点击按钮，默认将在场景根目录下创建一个名为HotSpot的实体：选中Hotspot，在检查器面板中可以修改该热点的交互行为：目前支持的行为类型有播放视频、音频、显示对话框和跳转链接。视频、
博客
stone 3d常见问题：本地tsp工程文件无法加载
03-04 1253
在html文件中加载类似 ./demo.tsp 这种相对路径的工程文件，不能工作，命令行错误信息为：URL scheme must be "http" or "https" for CORS request原因是Chrome默认不支持文件协议的跨域访问。解决方法有3种，一种是启用文件协议访问：--allow-file-access-from-files为安全起见，可使用一个单独安装的Chrome版本来以上面的参数来启动。该方法不推荐。第2种方法，是建立本地web服务器，可以是nodejs
博客
Stone 3D教程：如何快速批量创建树木、花草等自然物体
02-27 1098
Unity3D和Unreal里面可以引入树木花草包来批量创建这些植物，效果很棒。不过别忘了Unity3D需要5G+，Unreal需要10G+的空间。Stone只有3M多，也可以在场景中快速创建中小规模的自然植被。具体方法是使用Plant工具：点击Plant工具后，界面左侧会出现一个Plant工具箱：工具箱最上面的两个按钮分别是运行控制和帮助按钮，下面的范围、数量和缩放滑块用来控制种植区间、数量和植物大小。植物类型用来选择生成什么样的植被，依次可以是树、花、草和石头（石头这
博客
网页3D编辑器Stone教程：如何实现路径动画
02-23 1294
路径动画用来使物体沿着指定路径运动。在Stone 3D中实现路径动画，首先要创建一个路径，路径实际由一系列点组成。如何创建路径？我们先向场景中添加一个实体，比如一个平面（也可以不是平面）：然后点击页面左侧工具栏工具下面的路径工具：然后用鼠标左键点击平面选择路径的各个中转点，绘制出一条路径，完成最后一个点的选择时，按鼠标右键来结束中转点的选择，如下白色线条：然后记得关闭左边的工具箱：（用来设置路径线条的外观的工具箱）。注意：最后要关闭左边的路径工具箱，否则路径不会生
博客
Stone 3D教程：创建全景图云展览，只需要几分钟
02-21 1869
Stone 3D工具1.1.0版本引入全景图制作工具：点击全景图图标，Stone将默认创建一个全景图查看器和两张全景图场景：默认选中了Pano1节点。如果想在Pano1场景中添加切换热点，可以先通过按住鼠标左键来旋转场景到预期位置，直接鼠标点击该位置即可：注意！如果您点击时没有出现上图这样的灯泡图标，那么你可能没有选中任何一个Pano节点，你需要先选择一个想要添加热点的Pano场景节点（如Pano1）。然后在场景树中我们选中Pano2节点，类似方法添加热点。点击运行，鼠标
博客
网页3D编辑器Stone案例：快速定制旗帜类软体动画
01-28 593
展馆中的一个常见元素是旗帜，stone工具支持快速定制旗帜类软体动画。可以修改重力因子、风力、风阻、固定模式以及边缘加强因子。
博客
网页3D编辑器Stone案例：房地产数字沙盘
01-23 767
房产和展馆类的数字沙盘（或电子沙盘）目前主要是通过全息投影来实现的，即通过外围硬件把事先制作好的数字影像和物理沙盘进行全息融合。这种方案的优点是观感较好，缺点是用户和场景内物体没有互动，其技术本质和看3D电影类似。如果要提供3D电影的效果，同时又要能使得用户身临其境融入场景进行实时互动，就得依靠XR（三维）应用程序，而不只是投影。Stone工具和Unity、Unreal类似，可用来制作XR应用程序，Stone专门制作网页类的XR应用程序。下面是用Stone制作的一个房地产数字沙盘案例：
博客
WebGL渲染错误：GL_INVALID_FRAMEBUFFER_OPERATION: Draw framebuffer is incomplete
01-19 7375
出现这个framebuffer is incomplete的错误，一般是由于rendertarget设置有问题，比如缓冲区目标是否有效、使用上有没有冲突以及缓冲的尺寸是否设置非法等。
博客
网页3D编辑器Stone案例：未来城市云展厅
01-08 973
使用Techbrood Stone工具专业版可以快速制作在线云展厅，有效融合高清2D图文和3D场景交互。使用到了2D界面组件（专业版功能）、各种3D动画组件、路径规划、人机交互组件（专业版功能），以及粒子、UI系统。...
博客
如何在centos7上安装ruby和compass
01-05 635
踏得网迁移服务器（CentOS5->CentOS7）时，遇到了一些麻烦，这里记录一下。Compass是用来编译SCSS语法的，依赖于Ruby，虽然目前该项目可能已经不再活跃，但不能影响历史代码的应用。yum install centos-release-scl-rh centos-release-sclnext install the right versionyum --enablerepo=centos-sclo-rh install rh-ruby26then e..

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值