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 相关文章推荐
今天学到的CSS最新技术(与图片背景相关)
Dec 24 HTML / CSS
利用CSS3实现进度条的两种姿势详解
Mar 21 HTML / CSS
基于CSS3 animation动画属性实现轮播图效果
Sep 12 HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 HTML / CSS
html+css实现自定义图片上传按钮功能
Sep 04 HTML / CSS
HTML5实现动画效果的方式汇总
Feb 29 HTML / CSS
实例讲解利用HTML5 Canvas API操作图形旋转的方法
Mar 22 HTML / CSS
详解HTML5中表单验证的8种方法介绍
Dec 19 HTML / CSS
web字体加载方案优化小结
Nov 29 HTML / CSS
AmazeUI 平滑滚动效果的示例代码
Aug 20 HTML / CSS
html+css实现分层金字塔的实例
Jun 02 HTML / CSS
css3中2D转换之有趣的transform形变效果
Feb 24 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
php不用正则采集速度探究总结
2008/03/24 PHP
深入PHP数据加密详解
2013/06/18 PHP
PHP实现多图上传(结合uploadify插件)思路分析
2016/11/30 PHP
php自定义时间转换函数示例
2016/12/07 PHP
use jscript with List Proxy Server Information
2007/06/11 Javascript
JavaScript中yield实用简洁实现方式
2010/06/12 Javascript
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
计算新浪Weibo消息长度(还可以输入119字)
2013/07/02 Javascript
JS中自定义定时器让它在某一时刻执行
2014/09/02 Javascript
javascript验证邮件地址和MX记录的方法
2015/06/16 Javascript
js代码实现随机颜色的小方块
2015/07/30 Javascript
详解AngularJs中$resource和restfu服务端数据交互
2016/09/21 Javascript
jquery实现百叶窗效果
2017/01/12 Javascript
Linux使用Node.js建立访问静态网页的服务实例详解
2017/03/21 Javascript
import与export在node.js中的使用详解
2017/09/28 Javascript
vue select组件的使用与禁用实现代码
2018/04/10 Javascript
Node对CommonJS的模块规范
2019/11/06 Javascript
Vue-CLI 3 scp2自动部署项目至服务器的方法
2020/07/24 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
JavaScript浅层克隆与深度克隆示例详解
2020/09/01 Javascript
Python编码类型转换方法详解
2016/07/01 Python
详解python的ORM中Pony用法
2018/02/09 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
如何基于python对接钉钉并获取access_token
2020/04/21 Python
python矩阵运算,转置,逆运算,共轭矩阵实例
2020/05/11 Python
CSS3制作酷炫的条纹背景
2017/11/09 HTML / CSS
马来西亚网上美容店:Hermo.my
2017/11/25 全球购物
新西兰便宜隐形眼镜购买网站:QUICKLENS New Zealand
2019/03/02 全球购物
预备党员党校学习自我评价分享
2013/11/12 职场文书
施工安全责任书范本
2014/07/24 职场文书
学校周年庆活动方案
2014/08/22 职场文书
村创先争优活动总结
2014/08/28 职场文书
普通党员个人对照检查材料
2014/09/18 职场文书
导游词之云南省玉龙雪山
2019/12/19 职场文书
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
Redis实战之Lettuce的使用技巧详解
2022/12/24 Redis