<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="iconfont/iconfont.css">
<style> /* css的注释我就不写了- - */
*{
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>
html5制作3D一页纸飞入动画特效代码.zip （11个子文件） 
132677729240173036 likecs.com_132677729285676660 iconfont 
iconfont.eot 2KB iconfont.ttf 2KB
iconfont.svg 2KB iconfont.js 3KB
demo_unicode.html 4KB iconfont.woff 1KB demo_fontclass.html 2KB demo_symbol.html 4KB demo.css 6KB iconfont.css 2KB demo.html 12KB资源评论
毕业_设计
- 粉丝: 1974
- 资源: 1万+
最新资源
- C++项目：基于C++语言开发的图书借阅系统源码分享给需要的同学
- 计算机编程中Visual Studio安装教程详解
- 使用PSIM写的电流环通讯电路仿真模型，适合家用空调
- en-core-web-lg-3.8.0-py3-none-any
- 大学语文试题-（练习+答案）
- 使用Python语言来开发机器视觉Open eVision
- elasticsearch网页管理工具kibana
- STT2602-VB一种N-Channel沟道SOT23-6封装MOS管
- C语言项目：基于C语言开发的万年历完整源码分享给需要的同学
- 钢材表面缺陷检测数据集(1,800个灰度图像：六种不同类型的典型表面缺陷，每一类缺陷包含300个样本)
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
