HTML5 3D卷纸表单填写动画特效

<!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>



  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值