<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 3D卷纸表单填写动画特效</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
<style>
*{
margin: 0;
padding: 0;
}
body{
perspective: 1400px;
perspective-origin: 40% 50%;
}
div{
transform-style: preserve-3d;
font-size: 20px;
}
.wrap{
width: 800px;
height: 800px;
margin: -70px auto;
position: relative;
transform-origin: top;
transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) scale(0) translate3d(0px,0px,-500px);
border: 0;
transition: 1s;
}
@keyframes move{
0%{transform: rotateX(0deg) rotateY(-90deg) rotateZ(0deg) scale(0) translate3d(0px,0px,-500px);}
100%{transform: rotateX(0deg) rotateY(20deg) rotateZ(0deg) scale(.6) translate3d(0px,0px,0px);}
}
#btn1{
width: 180px;
height: 50px;
display: block;
margin: 100px auto;
border: 0;
outline: 0;
background-color: skyblue;
border-radius: 10px;
color: #fff;
cursor: pointer;
transition: 1s;
}
.wrap .shadow{
position: absolute;
width: 800px;
height: 1200px;
transform: translateZ(-500px);
box-shadow: 100px 100px 200px #dfdfdf,100px -100px 200px #dfdfdf,-100px 100px 200px #dfdfdf,-100px -100px 200px #dfdfdf;
background-color: #dfdfdf;
border: 0;
top: -100px;
transition: 2s 2s;
opacity: 0;
}
@keyframes change1{
0%{opacity: 0;}
100%{opacity: 1;}
}
.box{
width: 800px;
height: 50px;
line-height: 50px;
background-color: #fff;
border: 1px solid #fff;
transform-origin: top;
position: absolute;
top: 51px;
left: 0;
}
@keyframes change2{
0%{background-color: #fff;}
30%{background-color: #f5eedc;}
100%{background-color: #87ceeb;}
}
.box1{
transform: rotateX(-70deg);
}
.box2{
transform: rotateX(-50deg);
}
.box3{
transform: rotateX(-50deg);
}
.box4{
transform: rotateX(-20deg);
}
.box5{
transform: rotateX(-35deg);
}
.box6{
transform: rotateX(-60deg);
}
.box7{
transform: rotateX(-50deg);
}
.box8{
transform: rotateX(-15deg);
}
.box9{
transform: rotateX(-2deg);
}
.box10{
transform: rotateX(-1deg);
}
.box11{
transform: rotateX(-1deg);
}
.box12{
transform: rotateX(-1deg);
}
.box13{
transform: rotateX(-1deg);
}
.box14{
transform: rotateX(-1deg);
}
.box15{
transform: rotateX(-1deg);
}
.box16{
transform: rotateX(0deg);
}
.box17{
transform: rotateX(0deg);
}
.box18{
transform: rotateX(-1deg);
}
.box19{
transform: rotateX(-1deg);
}
.box20{
transform: rotateX(-1deg);
}
.box21{
transform: rotateX(-1deg);
}
.box22{
transform: rotateX(-1deg);
}
.box23{
transform: rotateX(-1deg);
}
.box24{
transform: rotateX(-1deg);
}
.box25{
transform: rotateX(-1deg);
}
.box26{
transform: rotateX(-1deg);
}
.box27{
transform: rotateX(-1deg);
}
.box28{
transform: rotateX(-10deg);
}
.box29{
transform: rotateX(-15deg);
}
.box30{
transform: rotateX(-45deg);
}
.box10 h4{
text-align: center;
color: #fff;
font-size: 30px;
}
.con{
width: 800px;
height: 50px;
top: 0;
cursor: pointer;
}
.con:hover{
background-color: #f5eedc;
}
.icon2{
opacity: 0;
}
.checked{
width: 50px;
height: 50px;
position: absolute;
top: 0;
left: 20px;
}
.iconfont{
font-size: 45px;
position: absolute;
color: deeppink;
transition: 0.6s;
}
.text{
width: 600px;
margin-left: 100px;
transition: 0.6s;
text-align: left;
}
.con:hover .text{
text-indent: 20px;
}
#all{
display: block;
width: 100px;
margin-left: 80px;
}
</style>
</head>
<body>
<button id="btn1">开始选择书单</button>
<div class="wrap">
<div class="shadow"></div>
<div class="box1 box">
<div class="box2 box">
<div class="box3 box">
<div class="box4 box">
<div class="box5 box">
<div class="box6 box">
<div class="box7 box">
<div class="box8 box">
<div class="box9 box">
<div class="box10 box">
<h4>请选择要购买的书籍</h4>
<div class="box11 box">
<div class="box12 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">1. JavaScript DOM 编程艺术</p>
</div>
<div class="box13 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">2. JavsScript高级程序设计（第三版）</p>
</div>
<div class="box14 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">3. JavaScript设计模式与开发实践</p>
</div>
<div class="box15 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">4. 学习Javascript数据结构与算法</p>
</div>
<div class="box16 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">5. 高性能JavaScript</p>
</div>
<div class="box17 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">6. 你不知道的JavaScript（YOU DONT KNOW JAVASCRIPT）</p>
</div>
<div class="box18 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">7. JavaScript权威指南（第6版）</p>
</div>
<div class="box19 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
</div>
<p class="text">8. ES6标准入门（第2版）</p>
</div>
<div class="box20 box">
<div class="box21 box">
<div class="con">
<div class="checked">
<i class="iconfont icon-fuxuankuang icon1"></i>
<i class="iconfont icon-fuxuankuangxuanzhong icon2"></i>
<span id="all">全选</span>
</div>
</div>
<div class="box22 box">
<div class="box23 box">
<div class="box24 box">
<div class="box25 box">
<div class="box26 box">
<div class="box27 box">
<div class="box28 box">
<div class="box29 box">
<div class="box30 box"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
var oWrap = document.getElementsByClassName('wrap')[0],
oBox = document.getElementsByClassName('box'),
oBtn1 = document.getElementById("btn1"),
oShadow = document.getElementsByClassName("shadow")[0],
oCon = document.getElementsByClassName("con"),
oIcon1 = document.getElementsByClassName('icon1'),
oIcon2 = document.getElementsByClassName('icon2'),
num = [0,0,0,0,0,0,0,0,0]; //控制每一行的开关
oBtn1.onclick = function () { //点击按钮之后的入场动画
oWrap.style.cssText = "animation: move 2s ease forwards;";
oShadow.style.cssText = "animation: change1 1s linear forwards;";
for(var i = 0;i < 30;i++){
oBox[i].style.cssText = `animation: change2 0.6s ${i*0.1-0.4}s linear forwards;`;
}
this.style.cssText = "opacity: 0;visibility: hidden;";
}
for(let i = 0;i < 8;i++){ //for循环生成前八个按钮的点击事件
oCon[i].onclick = function () {
if(num[i]){
oIcon1[i].style.opacity = "1";
oIcon2[i].style.opacity = "0";
num[i] = 0;
for(var k = 0;k < 8;k++){ //判断是否八个按钮都被选中 如果选中则全选按钮自动亮起
if(num[k] === 0){
num[8] = 0;
oIcon1[8].style.opacity = "1";
oIcon2[8].style.opacity = "0";
}
}
}
else {
oIcon2[i].style.opacity = "1";
oIcon1[i].style.opacity = "0";
num[i] = 1;
for(var k = 0;k < 8;k++){ //判断是否八个按钮是否其中一个未勾选 则全选按钮熄灭
if(num[k] === 1){
if(k === 7){
num[8] = 1;
oIcon1[8].style.opacity = "0";
oIcon2[8].style.opacity = "1";
}
}else {
break;
}
}
}
}
}
oCon[8].onclick = function () { //全选按钮单独处理
if(num[8]===0){
oIcon1[8].style.opacity = "0";
oIcon2[8].style.opacity = "1";
for(let j = 0;j < 8;j++){
num[j] = 1;
oIcon1[j].style.opacity = "0";
oIcon2[j].style.opacity = "1";
}
num[8] = 1;
}
else {
oIcon1[8].style.opacity = "1";
oIcon2[8].style.opacity = "0";
for(let j = 0;j < 8;j++){
num[j] = 0;
oIcon2[j].style.opacity = "0";
oIcon1[j].style.opacity = "1";
}
num[8] = 0;
}
}
</script>
</body>
</html>
扫一扫
207
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
