类似猎豹浏览器安装时的用户须知效果。
点击后效果
复制代码代码如下:
<!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>
