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轻松实现圆角效果
Nov 09 HTML / CSS
css3 伪元素和伪类选择器详解
Sep 04 HTML / CSS
CSS Grid布局教程之浏览器开启CSS Grid Layout汇总
Dec 30 HTML / CSS
利用纯CSS3实现tab选项卡切换示例代码
Sep 21 HTML / CSS
CSS3实现菜单悬停效果
Nov 17 HTML / CSS
HTML5文档结构标签
Apr 21 HTML / CSS
教你使用Canvas处理图片的方法
Nov 28 HTML / CSS
Html5之title吸顶功能
Jun 04 HTML / CSS
AmazeUI 手机版页面的顶部导航条Header与侧边导航栏offCanvas的示例代码
Aug 19 HTML / CSS
使用layui实现左侧菜单栏及动态操作tab项的方法
Nov 10 HTML / CSS
HTML5简单实现添加背景音乐的几种方法
May 12 HTML / CSS
前端使用svg图片改色实现示例
Jul 23 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
使用adodb lite解决问题
2006/12/31 PHP
PHP gbk环境下json_dencode传送来的汉字
2012/11/13 PHP
php中call_user_func函数使用注意事项
2014/11/21 PHP
基于thinkPHP类的插入数据库操作功能示例
2017/01/06 PHP
jquery事件机制扩展插件 jquery鼠标右键事件。
2011/12/26 Javascript
js document.write()使用介绍
2014/02/21 Javascript
angularJS模态框$modal实例代码
2017/05/27 Javascript
Nodejs之TCP服务端与客户端聊天程序详解
2017/07/07 NodeJs
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
javascript性能优化之分时函数的介绍
2018/03/28 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
React中嵌套组件与被嵌套组件的通信过程
2018/07/11 Javascript
浅谈HTTP 缓存的那些事儿
2018/10/17 Javascript
创建echart多个联动的示例代码
2018/11/23 Javascript
ES6知识点整理之Proxy的应用实例详解
2019/04/16 Javascript
小程序实现搜索框功能
2020/03/26 Javascript
解决layer.prompt无效的问题
2019/09/24 Javascript
ES6 Promise对象概念及用法实例详解
2019/10/15 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
vue2路由方式--嵌套路由实现方法分析
2020/03/06 Javascript
在webstorm中配置less的方法详解
2020/09/25 Javascript
[02:13] 完美世界DOTA2联赛PWL DAY5集锦
2020/11/03 DOTA
详解Python发送邮件实例
2016/01/10 Python
使用pip发布Python程序的方法步骤
2018/10/11 Python
python numpy 反转 reverse示例
2019/12/04 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
Python.append()与Python.expand()用法详解
2019/12/18 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
在keras下实现多个模型的融合方式
2020/05/23 Python
美国床垫连锁店:Mattress Firm
2021/02/13 全球购物
医学生临床实习自我评价
2014/03/07 职场文书
询价采购方案
2014/06/09 职场文书
保密工作承诺书
2014/08/29 职场文书
大学生国家助学金感谢信
2015/01/23 职场文书
公司庆典欢迎词
2015/01/26 职场文书
纯CSS3实现div按照顺序出入效果
2021/07/15 HTML / CSS