html5菜单折纸效果


Posted in HTML / CSS onApril 22, 2014

类似猎豹浏览器安装时的用户须知效果。

html5菜单折纸效果

点击后效果

html5菜单折纸效果

复制代码
代码如下:

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>fold paper effect by gt-柯乐义</title>
<style>
#wrapper {
-webkit-perspective: 55cm;
-webkit-perspective-origin: 50% 50%;
text-align: center;
}
.paper {
position: relative;
height: 40px;
width: 5em;
margin: 0;
background-color: aqua;
-webkit-transition: -webkit-transform 1s linear;
}
</style>
<script type="text/javascript">
window.angel = 0;
window.timer;
function fold() {
var foldUp = document.getElementById("foldUp");
var foldDown = document.getElementById("foldDown");
var down = document.getElementById("down");
if (window.angel == 0) {
window.timer = setInterval(function() {
var diff = different(-1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "-20px";
foldDown.style.top = "-60px";
down.style.top = "-80px";
window.angel = -90;
}, 1030);
foldUp.style.webkitTransform = "rotateX(-90deg)";
foldDown.style.webkitTransform = "rotateX(90deg)";
} else if (angel == -90) {
window.timer = setInterval(function() {
var diff = different(1, 20);
console.log(foldUp.offsetTop)
move(foldUp, diff, 1);
move(foldDown, diff, 3);
move(down, diff, 4);
}, 40);
setTimeout(function() {
clearInterval(window.timer);
foldUp.style.top = "0";
foldDown.style.top = "0";
down.style.top = "0";
window.angel = 0;
}, 1030);
foldUp.style.webkitTransform = "rotateX(0deg)";
foldDown.style.webkitTransform = "rotateX(0deg)";
} else {
console.log(window.angel)
}
}
function positionValue(div, type) {// 得到css带单位的值
var str = div.style[type];
str = str.substring(0, str.length - 2);
var value = parseInt(str);
if (isNaN(value)) {
value = 0;
}
return value;
}
function move(div, different, time) {
var top = positionValue(div, "top");
div.style.top = top + different * time + "px";
}
function different(direction, height) {
var lastAngel = window.angel;
window.angel += 3.6 * direction;
var different = Math
.ceil((Math.cos(window.angel / 180 * Math.PI) - Math
.cos(lastAngel / 180 * Math.PI))
* height * 100) / 100;
return different;
}
</script>
</head>
<body>
<div id="wrapper">
<div id="up" class="paper">
g
</div>
<div id="foldUp" class="paper">
n
</div>
<div id="foldDown" class="paper">
b
</div>
<div id="down" class="paper">
t
</div>
</div>
<button onclick=fold();>
fold
</button>
</body>
</html>
HTML / CSS 相关文章推荐
CSS3实现粒子旋转伸缩加载动画
Apr 22 HTML / CSS
css3动画事件—webkitAnimationEnd与计时器time事件
Jan 31 HTML / CSS
使用before和:after伪类制作css3圆形按钮
Apr 08 HTML / CSS
css3 中的新特性加强记忆详解
Apr 16 HTML / CSS
CSS3实现10种Loading效果
Jul 11 HTML / CSS
html5 标签
Jul 16 HTML / CSS
HTML5 video 视频标签使用介绍
Feb 03 HTML / CSS
基于html5 canvas实现漫天飞雪效果实例
Sep 10 HTML / CSS
Html5实现文件异步上传功能
May 19 HTML / CSS
Html5导航栏吸顶方案原理与对比实现
Jun 10 HTML / CSS
AmazeUI 输入框组的示例代码
Aug 14 HTML / CSS
浅谈css实现背景颜色半透明的两种方法
Dec 06 HTML / CSS
html5读取本地文件示例代码
Apr 22 #HTML / CSS
使用html5制作loading图的示例
Apr 14 #HTML / CSS
html5的canvas元素使用方法介绍(画矩形、画折线、圆形)
Apr 14 #HTML / CSS
html5图片上传预览示例分享
Apr 14 #HTML / CSS
HTML5 Canvas锯齿图代码实例
Apr 10 #HTML / CSS
HTML5 Canvas旋转动画的2个代码例子(一个旋转的太极图效果)
Apr 10 #HTML / CSS
使用javascript和HTML5 Canvas画的四渐变色播放按钮效果
Apr 10 #HTML / CSS
You might like
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php编写的抽奖程序中奖概率算法
2015/05/14 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP仿微信发红包领红包效果
2016/10/30 PHP
JavaScript Konami Code 实现代码
2009/07/29 Javascript
javascript代码加载优化方法
2011/01/30 Javascript
JS中图片缓冲loading技术的实例代码
2013/08/29 Javascript
怎么判断js脚本加载完成
2014/02/28 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
node.js中的事件处理机制详解
2016/11/26 Javascript
详解js产生对象的3种基本方式(工厂模式,构造函数模式,原型模式)
2017/01/09 Javascript
angular select 默认值设置方法
2017/06/23 Javascript
ionic环境配置及问题详解
2017/06/27 Javascript
vue awesome swiper异步加载数据出现的bug问题
2018/07/03 Javascript
JavaScript动态生成表格的示例
2020/11/02 Javascript
python线程池的实现实例
2013/11/18 Python
python 专题九 Mysql数据库编程基础知识
2017/03/16 Python
Python实现网站注册验证码生成类
2017/06/08 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
pandas的连接函数concat()函数的具体使用方法
2019/07/09 Python
django项目中使用手机号登录的实例代码
2019/08/15 Python
python生成requirements.txt的两种方法
2019/09/18 Python
python 创建一维的0向量实例
2019/12/02 Python
解决Jupyter因卸载重装导致的问题修复
2020/04/10 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
EMU Australia澳大利亚官网:澳大利亚本土雪地靴品牌
2019/07/24 全球购物
应届实习生的自我评价范文
2014/01/05 职场文书
中学运动会广播稿
2014/01/19 职场文书
农村葬礼主持词
2014/03/31 职场文书
县级文明单位申报材料
2014/05/23 职场文书
家长会欢迎标语
2014/06/24 职场文书
关于工作时间玩手机的检讨书
2014/09/18 职场文书
工作态度不端正检讨书
2014/10/04 职场文书
专业技术人员年度考核评语
2014/12/31 职场文书
2015年防灾减灾工作总结
2015/07/24 职场文书
教你怎么用Python生成九宫格照片
2021/05/20 Python