CSS3 之 童年的纸飞机
今天我们来折纸飞机(可以飞出去的那种哦)
基本全用css来实现,只有一小部分的js
首先看一下飞机的构造
灰色区域为可折叠区域
白色区域为机身
三角形由border画出来的再经过各种平移翻转变成上图
写之前再补充个知识点:
我们颜色的设置不用rgba,
用hsl() h: 色调 0- 360 0(或360)表示红色,120表示绿色,240表示蓝色
s : 饱和度 0% -100%
l : 亮度 0% - 100%
先看效果才有动力:
HTML:
<!--童年的纸飞机-->
<div class="airplane">
<div class="front-end show-front">
<!--宽高自适应的文本框-->
<div class="text-input" contenteditable = true></div>
<div class="fly">
fly
</div>
</div>
<div class="backup-end show-backup">
<div class="left-plane">
<!--左上角折叠区域-->
<div class="left-top fold"></div>
<!--左下角折叠区域-->
<div class="left-bottom fold"></div>
<!--机身-->
<div class="wing wing1"></div>
<div class="wing wing2"></div>
</div>
<div class="right-plane">
<!--右上角折叠区域-->
<div class="right-top fold"></div>
<!--右下角折叠区域-->
<div class="right-bottom fold"></div>
<!--机身-->
<div class="wing wing3"></div>
<div class="wing wing4"></div>
</div>
</div>
</div>
css:
body{
width: 100%;
height: 680px;
background-color: #000;
background-repeat: no-repeat;
overflow: hidden;
transition: all 2s linear;
}
/*景深加在父级上*/
.airplane{
width: 100%;
height: 100%;
-webkit-perspective: 800px;
-webkit-perspective-origin: 50% 50%;
}
/*纸飞机前面*/
/*一开始不旋转*/
.front-end.show-front{
transform: rotateY(0deg);
}
/*点击后旋转*/
.front-end{
background: rgba(255, 255, 255, 0.15);
*background: hsl(0, 0%, 88%);
/*绕Y轴旋转-180度*/
transform: rotateY(-180deg);
position: relative;
box-sizing: border-box;
padding: 20px;
text-align: center;
backface-visibility: hidden;
width: 400px;
height: 260px;
top: 240px;
transition: all 0.8s ease-in-out;
margin: auto;
}
/*文本框*/
.text-input{
width: 100%;
max-width:360px;
min-height:100px;
padding: 10px;
box-sizing: border-box;
height: 140px;
background-color: #ffffff;
font-smoothing: subpixel-antialiased;
font-size: 18px;
text-align: left;
font-family: "Microsoft YaHei",Helvetica, Arial, Verdana;
line-height: 20px;
}
.fly{
transition: all 0.3s ease-in-out;
/*hsl是色调/饱和度/亮度/*/
border: 2px solid hsl(194, 100%, 72%);
margin: 15px 0;
padding: 10px;
outline: none;
font-size: 18px;
cursor: pointer;
font-family: "Microsoft YaHei";
background-color: hsl(0, 0%, 94%);
border-radius:4px;
user-select: none;
}
/*点击按钮时缩小动画*/
.fly:active{
transform: scale(0.85);
transition: all 10ms ease-in-out;
background-color: hsl(0, 0%, 85%);
border: 2px solid hsl(194, 30%, 55%);
}
.backup-end{
perspective: 600px;
perspective-origin: 200px 131px;
transform-style: preserve-3d;
transition: all 0.8s ease-in-out;
backface-visibility: hidden;
position: relative;
width: 400px;
height: 260px;
margin: auto;
}
/*一开始不显示飞机*/
.backup-end.show-backup{
transform: rotateY(180deg);
}
/*飞机的左右两边公共样式*/
.left-plane, .right-plane{
transform-style: preserve-3d;
width: 200px;
height: 260px;
display: block;
position: absolute;
top: 0px;
transition: all 1s ease-in-out;
}
/*左边*/
.left-plane{
transform: rotateZ(0deg);
transform-origin: 100% 50% 0;
left: 0;
}
/*右边*/
.right-plane{
transform: rotateZ(0deg);
transform-origin: 0% 50%;
left: 199px;
}
/*左右机身的公共样式*/
.wing{
position: absolute;
transform-origin: 0 0 0;
perspective: 1px;
perspective-origin: 50% 50%;
backface-visibility: hidden;
transition: all 1.3s linear;
box-sizing: border-box;
margin: 0;
padding: 0;
background: none;
border: none;
border-top: 240px solid hsla(0, 0%, 0%, 0);
border-bottom: 0px solid hsla(0, 0%, 0%, 0);
border-right: 100px solid hsl(0, 0%, 88%);
width: 0;
height: 0;
bottom: 0;
}
/*绘制 飞机2d 雏形*/
.wing1 {
transform-origin: 100% 100%;
transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D图像的偏移 旋转*/
} .wing2 {
transform: rotateZ(22.62deg);
transform-origin: 100% 100%;
border-left: 100px solid hsl(0, 0%, 88%);
border-right: none;
left: 100px;
} .wing3 {
transform: rotateZ(-22.62deg);
transform-origin: 0% 100%;
border-right: 100px solid hsl(0, 0%, 88%);
} .wing4 {
transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
transform-origin: 0% 100%;
border-right: none;
border-left: 100px solid hsl(0, 0%, 88%);
left: 100px;
}
/*绘制可折叠区域*/
.left-top.fold{
position: absolute;
transform-origin: 100px 112px;
transition-delay: 1300ms;
width: 0;
height: 0;
top: 0;
border-right: 202px solid hsla(0, 0%, 0%, 0);
border-bottom: 202px solid hsla(0, 0%, 0%, 0);
border-top: 222px solid hsl(0, 0%, 88%);
}
.right-top.fold{
position: absolute;
right: 0;
border-left: 202px solid hsla(0, 0%, 0%, 0);
border-bottom: 202px solid hsla(0, 0%, 0%, 0);
border-top: 222px solid hsl(0, 0%, 88%);
transform-origin: 96px 112px;
transition-delay: 1650ms;
}
.left-bottom.fold{
position: absolute;
transform-origin: 109px 0;
transition-delay: 2100ms;
width: 109px;
height: 38px;
background: hsl(0, 0%, 88%);
bottom: 0;
left: 0;
}
.right-bottom.fold{
position: absolute;
transform-origin: 0 0;
transition-delay: 2450ms;
width: 109px;
height: 38px;
background: hsl(0, 0%, 88%);
bottom: 0;
right: 0;
}
/*补全 折叠尾翼 剩余 三角区域*/
.left-bottom.fold:after {
position: absolute;
content: "";
border-right: 92px solid hsla(0, 0%, 0%, 0);
border-bottom: 39px solid hsl(0, 0%, 88%);
border-top: 37px solid hsla(0, 0%, 0%, 0);
left: 109px;
bottom: 0;
} .right-bottom.fold:after {
position: absolute;
content: "";
border-left: 92px solid hsla(0, 0%, 0%, 0);
border-bottom: 39px solid hsl(0, 0%, 88%);
border-top: 37px solid hsla(0, 0%, 0%, 0);
left: -92px;
bottom: 0;
} /****************************/
/****此处开始配合js*****/
/*折叠效果*/
.fold {
transition: transform 800ms ease-out;
backface-visibility: hidden;
position: absolute;
background-color: transparent;
z-index: 0;
width: 0;
}
/* 折叠效果(左机翼、左尾翼) */
.left-top.fold.curved {
transform: rotate3d(1,-1.11,0,180deg);
} .left-bottom.fold.curved {
transform: rotate3d(2.4867,1,0,-180deg);
}
/* 折叠效果(右机翼、右尾翼)*/
.right-top.fold.curved {
transform: rotate3d(1,1.11,0,180deg);
} .right-bottom.fold.curved {
transform: rotate3d(-2.4867,1,0,180deg);
} /* 平放一整个飞机 */
.airplane.hover {
transform: rotateX(54deg) rotateY(-10deg) rotateZ(25deg);
transition-delay: 0.5s;
}
/*放平之后 左侧整体倾斜 (体现折叠效果)*/
.backup-end.hover .left-plane {
transform: rotateY(60deg);
} .backup-end.hover .right-plane {
transform: rotateY(-60deg);
}
/* 3d视觉中放平 左侧机翼*/
.backup-end.hover .wing1 {
transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
border-right: 100px solid hsl(0, 0%, 95%);
}
/*左侧 飞机手持部位透明度降低*/
.backup-end.hover .wing2 {
border-left: 100px solid hsl(0, 0%, 85%);
} /* 3d视觉中放平 右侧机翼*/
.backup-end.hover .wing4 {
transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
border-left: 100px solid hsl(0, 0%, 95%);
} /*右侧 飞机手持部位透明度降低*/
.backup-end.hover .wing3 {
border-right: 100px solid hsl(0, 0%, 71%);
} /*机翼 折叠效果(右机翼、右尾翼) 之后 多余部分隐藏掉*/
.backup-end.hover .curved {
display: none;
} /* #wind_container.hover .wing {
backface-visibility: visible;
} */ /* 飞机后退助跑 */
.backup-end.hover.fly_away_first {
transform: translateX(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
transition-delay: 0ms;
transition-duration: 0.4s;
transition-timing-function: ease-out;
}
/* 飞机向前飞翔至消失 */
.backup-end.hover.fly_away_first.fly_away {
transform: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
transition: transform 2s ease-out, opacity 1.5s 0.5s linear;
opacity: 0;
}
js:
// 童年的纸飞机
const fly = document.getElementsByClassName('fly')[0];
const front = document.getElementsByClassName('front-end')[0];
const backup = document.getElementsByClassName('backup-end')[0];
const fold = document.getElementsByClassName('fold'); fly.addEventListener('click', () => {
first().then(second).then(third).then(fourth).then(fifth).catch((err)=> {
console.log(err)
});
}, false); // 第一步
function first() {
return new Promise((suc, err) => {
setTimeout(() => {
// 隐藏信息面板
front.classList.remove('show-front');
// 翻转至正面
backup.classList.remove('show-backup');
// 折叠效果(左翼、右翼)
for (let i = 0; i < fold.length; i++) {
fold[i].classList.add('curved')
}
// 颜色变换
document.body.style.backgroundColor = "#54575A";
suc(1)
}, 200)
})
} function second() {
return new Promise((suc, err) => {
setTimeout(function () {
backup.classList.add('hover');
document.body.style.backgroundColor = "#AD8BD8";
suc(2)
}, 2800);
})
} //步骤三:飞机后退助跑
function third() {
return new Promise((suc, err) => {
setTimeout(function () {
backup.classList.add('fly_away_first');
document.body.style.backgroundColor = "#6E99C4";
suc(3)
}, 2000);
})
} // 步骤四:飞机向前飞翔至消失
function fourth() {
return new Promise((suc, err) => {
setTimeout(function () {
backup.classList.add('fly_away');
document.body.style.backgroundColor = "#3F9BFF";
suc(4)
}, 600);
})
} function fifth() {
return new Promise((suc, err) => {
setTimeout(function () {
front.classList.add('show-front');
backup.classList.remove('fly_away','fly_away_first','hover');
backup.classList.add('show-backup');
for (let i = 0; i < fold.length; i++) {
fold[i].classList.remove('curved')
}
document.body.style.backgroundColor = "#000";
suc(5)
}, 3000);
})
}
参考自:腾讯课堂渡一教育,有兴趣的同学可以去听一听他们的课,讲的蛮不错的, 对初学者很友好。
CSS3 之 童年的纸飞机的更多相关文章
- QQ音乐API分析记录
我一直是QQ音乐的用户,最近想做一个应用,想用QQ音乐的API,搜索了很久无果,于是就自己分析QQ音乐的API. 前不久发现QQ音乐出了网页版的,是Flash的,但是,我用iPhone打开这个链接的时 ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果-transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
- 三分钟学会用 js + css3 打造酷炫3D相册
之前发过该文,后来不知怎么回事不见了,现在重新发一下. 中秋主题的3D旋转相册 如图,这是通过Javascript和css3来实现的.整个案例只有不到80行代码,我希望通过这个案例,让正处于迷茫期的j ...
- 使用CSS3实现一个3D相册
CSS3系列我已经写过两篇文章,感兴趣的同学可以先看一下CSS3初体验之奇技淫巧,CSS3 3D立方体效果-transform也不过如此 第一篇主要列出了一些常用或经典的CSS3技巧和方法:第二篇是一 ...
- Web大前端时代之:HTML5+CSS3入门系列
准备来一波新技术,待续.... Old: 联系源码:https://github.com/dunitian/LoTHTML5 文档下载:https://github.com/dunitian/LoTD ...
- 07. Web大前端时代之:HTML5+CSS3入门系列~H5 地理位置
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 源码:https://github.com/duniti ...
- 前端制作动画的几种方式(css3,js)
制作动态的网页是是前端工程师必备的技能,很好的实现动画能够极大的提高用户体验,增强交互效果,那么动画有多少实现方式,一直对此有选择恐惧症的我就总结一下,以便在开发的时候选择最好的实现方式. 1.css ...
随机推荐
- 关于JavaScript的那些话
1.初学者动手环境----推荐Chrome的控制台(F12调用)2.JS中两个非常重要的数据类型是对象和数组.3.JavaScript 程序是用Unicode字符集编写的.4.JavaScript是区 ...
- [Java算法分析与设计]--单向链表(List)的实现和应用
单向链表与顺序表的区别在于单向链表的底层数据结构是节点块,而顺序表的底层数据结构是数组.节点块中除了保存该节点对应的数据之外,还保存这下一个节点的对象地址.这样整个结构就像一条链子,称之为" ...
- mina框架tcpt通讯接收数据断包粘包处理
用mina做基于tcp,udp有通讯有段时间了,一直对编码解码不是很熟悉,这次做项目的时候碰到了断包情况,贴一下解决过程, 我接受数据格式如下图所示: unit32为c++中数据类型,代表4个字节,由 ...
- CentOS 6 安装HBase集群教程
hbase0.99.2安装包下载(链接:https://pan.baidu.com/s/1dR-HB3P6mzsXVW6sLI8uxQ 密码:4g1n) 首先需要安装 zookeeper(点击查看) ...
- 单片机开发——03工欲善其事必先利其器(AD软件安装破解)
在单片机开发中,有了Keil的程序编程,Protues的模拟仿真,那么问题来了,怎么去进行电路图设计以及硬件调试呢?此刻就必须引入本文的Altium Designer (下文简称AD)安装与破解.在硬 ...
- HTML5总结
HTML的定义 HyperText Markup Language 超文本标记语言 超级文本标记语言是标准通用标记语言下的一个应用,也是一种规范,一种标准, 它通过标记符号来标记要显示的网页中的各个部 ...
- javase---string类介绍01
一.String类简介 java.lang.String类用于描述一个字符序列.String类是不可变对象的类.其对象一旦被创建,永远无法改变.但是对象的引用可以重新赋值.而且String类被fina ...
- 进阶-MongoDB 知识梳理
MongoDB 一.MongoDB简介 MongoDB是一个高性能,开源,无模式的文档型数据库,是当前NoSql数据库中比较热门的一种.它在许多场景下可用于替代传统的关系型数据库或键/值存储方式.Mo ...
- PAT1035: Password
1035. Password (20) 时间限制 400 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue To prepare f ...
- Spring Cloud微服务系统下的数据一致性探讨
我想这个问题需要根据自己的系统具体架构来分别讨论,这边拿一个车联网的系统举例. 拆除GPS这个功能接口需要分几个步骤实现(不涉及数据更新的步骤略去了): ①更改GPS设备状态(设备管理服务) ②更改工 ...