在开发过程中,经常会遇到一些交互效果,今天所联系的便是一个类似折纸的折叠效果,查看效果.
说到折纸,我们先看下图
这是我第一时间想到的大体思路,如果能让这6个面连续的变化角度到0不就可以了吗,运用css3 transition或animation毫无压力~~
要实现上图的这种效果,设置不同rotateX值及父元素的perspective即可,可是在实际写出来之后却发现这样并不可行,不论我们设置transform-origin或者其他的值,都不能使几个面相互一直相互连接。
再来看下图,我们折纸过程实际是这样子的,如果我们分解开来,可以分解成以下步骤,第一1,2,3在同一个平面,第二步:1为1个平面,2,3为1个平面,第三步:1,2,3分别成3个平面。我们可以这样认为,即2,3是以一定角度从1平面折叠,3是以一定角度从2平面折叠,所以我们修改下我们的html结构
段落1
段落2
段落3
css代码:
.outer{width:400px;margin:0px auto;-webkit-perspective:500px;-webkit-perspective-origin:% %
}
.outer .fold{height:100px;text-align:center;line-height:100px;font-family:'Microsoft YaHei';font-size: 24px;color:#fff;-webkit-transform-style:preserve-3d;
-webkit-transform-origin: }
.red{background-color:red;-webkit-transform:rotateX(50deg)}
.yellow{background-color:yellow;-webkit-transform:rotateX(-120deg)}
.blue{background-color:blue;-webkit-transform:rotateX(136deg)}
.green{background-color:green;-webkit-transform:rotateX(-120deg)}
我们得到的效果如下:
下面我们加上收缩动画,效果看这里:
代码如下:
css:
.outer{width:400px;margin:100px auto;
-webkit-perspective:800px;
-webkit-perspective-origin:% %
}
.outer .fold{height:100px;
text-align:center;
line-height:100px;
font-family:'Microsoft YaHei';
font-size: 24px;
color:#fff;
-webkit-transform-style:preserve-3d;
-webkit-transform-origin: ;
-webkit-transition:transform linear 800ms;
}
.red{background-color:red;
-webkit-transform:rotateX(90deg)
}
.yellow{background-color:yellow;
-webkit-transform:rotateX(-180deg)
}
.blue{background-color:blue;
-webkit-transform:rotateX(180deg);
}
.green{background-color:green;
-webkit-transform:rotateX(-180deg);
}
.outer.activity .fold{-webkit-transform:rotateX(0deg);
}
html:
段落1
段落2
段落3
js:
var btn=document.getElementById('btn'),
contain=document.querySelector('.outer')
;
btn.οnclick=function(){
contain.classList.toggle('activity')
}
当然,我们可以为不同的元素添加不同的transition-delay,来使几个面有先后的展开。
那些不错的 [ Html5 + CSS3 + Canvas ] 效果!
apng制作工具:http://isparta.github.io/how.html apng制作文章:http://isux.tencent.com/introduction-of-apng.htm ...
jQuery文本段落展开和折叠效果
Bounce.js – 快速创建漂亮的 CSS3 动画效果
Bounce.js 是一个用于制作漂亮的 CSS3 关键帧动画的 JavaScript 库,使用其特有的方式生成的动画效果.只需添加一个组件,选择预设,然后你就可以得到一个短网址或者导出为 CSS 代 ...
Hover.css:一组超实用的 CSS3 悬停效果和动画
Hover.css 是一套基于 CSS3 的鼠标悬停效果和动画,这些可以非常轻松的被应用到按钮.LOGO 以及图片等元素.所有这些效果都是只需要单一的标签,必要的时候使用 before 和 after ...
10个实用的 CSS3 按钮效果制作教程
人们往往喜欢那些有更多互动元素的网站,因此现在很多设计师专注于他们的 CSS3 技能.这是因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这里分享的10个优秀的 CSS3 按钮效果制作 ...
学习制作精美 CSS3 按钮效果的10个优秀教程
由于互联网世界正在发生变化,人们往往喜欢那些有更多互动元素的网站,因此现在很多 Web 开发人员也在专注于提高他们的 CSS3 技能,因为 CSS3 技能可以帮助他们在很大的程度上实现所需的吸引力.这 ...
Cool!15个创意的 CSS3 文本效果【下篇】
这里文章收集了15个创意的 CSS3 文本效果,所有的都是精心挑选,这些可能会增加创意的火花到你的下一个项目.其中有些是用于特定用途,而另一些则适用于多种用途.如果你想要一个精彩而又充满色彩的文字效果 ...
随机推荐
Android-socket服务端断重启后,android客户端自动重连
今天研究这个问题搞了整整一天啊!终于出来了,不过我没有多大的成就感,为什么呢?因为这不是我的劳动成果.同样的问题,我却没想出来!心塞的很啊…… 不过还是要给大家分享一下,希望给大家带来帮助! 先声明一 ...
如何恢复SQL Server 中的Master库
如何恢复SQL Server 2005中的Master库 2011-05-10 16:34 Vegas Lee 博客园 我要评论(0) 字号:T | T master库对于SQLServer来说, ...
SoDiaoEditor电子病历编辑器更新至V3版本,愿与各位一路同行!
简单闲聊两句-- 记得刚参加工作那会儿,去医院实施,信息科不远处就是手术室,门口每天都挤满了人,他们中大多数都是等待手术结果的患者家属,有的还会把折叠床带来,应该是陪床有段时间了.有时路过,还会听到一 ...
Oracle创建表空间、用户管理、角色管理
内容:Oracle创建表空间.用户管理.角色管理 1.用系统用户登录Oracle 默认的系统用户: sys/system.sysman.scott sys:权限最大,超级用户,可以完成所有任务, 默认 ...
C语言:使用结构体和指针函数实现面向对象思想(OO编程)
原文:https://www.linuxidc.com/Linux/2016-12/138789.htm 有关: 一.基础研究 观察如下两个程序a. ...
使用gulp和bable实现实时编译ES6代码
这篇文章最初发表在我自己折腾的博客站点上:使用gulp和bable实现实时编译ES6代码,该博客用了一位前辈开源的源码,基于thinkjs和vuejs开发,欢迎大家来逛逛. 问题描述> 项目开发 ...
LINUX系统一一CentOS6.5之tomcat安装
一 准备工作建立好文件夹 tomcat文件夹地址 二 下载并解压 当然是下载了 1.centos6.5系统里面下载 解压 2.本机下载 然后利用Xftp复制到目标文件加载解压(我用的是这种,随意啦) ...
CSS规范 - 优化方案--(来自网易)
值缩写 缩写值可以减少CSS文件大小,并增加可读性和可维护性. 但并非所有的值都必须缩写,因为当一个属性的值缩写时,总是会将所有项都设置一遍,而有时候我们不希望设置值里的某些项. /* 比如我们用下面 ...
前端提交表单两种验证方式记录 jq或h5 required属性
JQuery:
&l ...