<!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资源评论
毕业_设计
- 粉丝: 1993
- 资源: 1万+
最新资源
- (179719018)NPC三电平逆变器改进同步载波调制算法仿真 （同步SPWM，同步SVPWM） 本仿真的优点: 1)三电平逆变器的输出相电压保持
- 基于springboot的校园新闻网站源码（java毕业设计完整源码+LW）.zip
- (19059030)java开发学生信息管理系统
- 攀爬机器人sw2016含cad可编辑全套技术资料100%好用.zip
- C#源码 上位机 SECS协议，里面包含各种进制转，用于半导体行业，程序全源码
- 2019年江西省职业院校技能大赛网络搭建与应用竞赛方案
- 一款同时支持JAVA REST API和JAVA WebSocket和Apache Dubbo RPC接口文档生成的工具，smart-doc在业内率先提出基于JAVA泛型定义推导的理念
- 全方位平面定位系统sw2018可编辑全套技术资料100%好用.zip
- nginx-1.23.2版本RPM包
- 三相电流型PWM整流matlab仿真，采用电压外环和电流内环的双闭环控制策略，附赠自己整理的说明文档和几篇参考文献
- 自然人电子税务局（扣缴端）个税官网下载 ETax模拟电子税务局学习系统 自然人电子税务局扣缴客户端数据恢复电脑重装个税数据丢失怎么处理数据丢失了怎么办备份更换电脑后，教你轻松恢复个税扣缴端数据个税扣缴
- deletexxxxxxxxxxxxxxxxxxxxxxxxxx
- 练习-登录123401
- 雷电模拟器安装Lxposed
- 双馈风机次同步振荡抑制策略（一） 含 基于转子侧附加阻尼控制（SDC）的双馈风机次同步振荡抑制，不懂就问， 附加阻尼控制 (SDC)被添加到 RSC 内部控制器的q轴输出中 这种方法是由Andres
- 基于springboot的新生宿舍管理系统源码（java毕业设计完整源码+LW）.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
