经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置：技术经验 » HTML/CSS » CSS3 » 查看文章
CSS3 实现童年的纸飞机 _css3_CSS
来源：jb51　　时间：2019/5/6 8:39:15　　对本文有异议

今天我们来折纸飞机（可以飞出去的那种哦）

基本全用css来实现，只有一小部分的js

首先看一下飞机的构造

灰色区域为可折叠区域

白色区域为机身

三角形由border画出来的再经过各种平移翻转变成上图

写之前再补充个知识点：

我们颜色的设置不用rgba，

用hsl() h: 色调 0- 360 0(或360)表示红色，120表示绿色，240表示蓝色

　　　s ： 饱和度 0% -100%

　　　l : 亮度 0% - 100%

先看效果才有动力：

HTML:

  1. <!--童年的纸飞机-->
  2. <div class="airplane">
  3.     <div class="front-end show-front">
  4.         <!--宽高自适应的文本框-->
  5.         <div class="text-input" contenteditable = true></div>
  6.         <div class="fly">
  7.             fly
  8.         </div>
  9.     </div>
  10.     <div class="backup-end show-backup">
  11.         <div class="left-plane">
  12.             <!--左上角折叠区域-->
  13.             <div class="left-top fold"></div>
  14.             <!--左下角折叠区域-->
  15.             <div class="left-bottom fold"></div>
  16.             <!--机身-->
  17.             <div class="wing wing1"></div>
  18.             <div class="wing wing2"></div>
  19.         </div>
  20.         <div class="right-plane">
  21.             <!--右上角折叠区域-->
  22.             <div class="right-top fold"></div>
  23.             <!--右下角折叠区域-->
  24.             <div class="right-bottom fold"></div>
  25.             <!--机身-->
  26.             <div class="wing wing3"></div>
  27.             <div class="wing wing4"></div>
  28.         </div>
  29.     </div>
  30. </div>

css:

  1. body{
  2.     width: 100%;
  3.     height: 680px;
  4.     background-color: #000;
  5.     background-repeat: no-repeat;
  6.     overflow: hidden;
  7.     transition: all 2s linear;
  8. }
  9. /*景深加在父级上*/
  10. .airplane{
  11.     width: 100%;
  12.     height: 100%;
  13.     -webkit-perspective: 800px;
  14.     -webkit-perspective-origin: 50% 50%;
  15. }
  16. /*纸飞机前面*/
  17. /*一开始不旋转*/
  18. .front-end.show-front{
  19.     transform: rotateY(0deg);
  20. }
  21. /*点击后旋转*/
  22. .front-end{
  23.     background: rgba(255, 255, 255, 0.15);
  24.     *background: hsl(0, 0%, 88%);
  25.     /*绕Y轴旋转-180度*/
  26.     transform: rotateY(-180deg);
  27.     position: relative;
  28.     box-sizing: border-box;
  29.     padding: 20px;
  30.     text-align: center;
  31.     backface-visibility: hidden;
  32.     width: 400px;
  33.     height: 260px;
  34.     top: 240px;
  35.     transition: all 0.8s ease-in-out;
  36.     margin: auto;
  37. }
  38. /*文本框*/
  39. .text-input{
  40.     width: 100%;
  41.     max-width:360px;
  42.     min-height:100px;
  43.     padding: 10px;
  44.     box-sizing: border-box;
  45.     height: 140px;
  46.     background-color: #ffffff;
  47.     font-smoothing: subpixel-antialiased;
  48.     font-size: 18px;
  49.     text-align: left;
  50.     font-family: "Microsoft YaHei",Helvetica, Arial, Verdana;
  51.     line-height: 20px;
  52. }
  53. .fly{
  54.     transition: all 0.3s ease-in-out;
  55.     /*hsl是色调/饱和度/亮度/*/
  56.     border: 2px solid hsl(194, 100%, 72%);
  57.     margin: 15px 0;
  58.     padding: 10px;
  59.     outline: none;
  60.     font-size: 18px;
  61.     cursor: pointer;
  62.     font-family: "Microsoft YaHei";
  63.     background-color: hsl(0, 0%, 94%);
  64.     border-radius:4px;
  65.     user-select: none;
  66. }
  67. /*点击按钮时缩小动画*/
  68. .fly:active{
  69.     transform: scale(0.85);
  70.     transition: all 10ms ease-in-out;
  71.     background-color: hsl(0, 0%, 85%);
  72.     border: 2px solid hsl(194, 30%, 55%);
  73. }
  74. .backup-end{
  75.     perspective: 600px;
  76.     perspective-origin: 200px 131px;
  77.     transform-style: preserve-3d;
  78.     transition: all 0.8s ease-in-out;
  79.     backface-visibility: hidden;
  80.     position: relative;
  81.     width: 400px;
  82.     height: 260px;
  83.     margin: auto;
  84. }
  85. /*一开始不显示飞机*/
  86. .backup-end.show-backup{
  87.     transform: rotateY(180deg);
  88. }
  89. /*飞机的左右两边公共样式*/
  90. .left-plane, .right-plane{
  91.     transform-style: preserve-3d;
  92.     width: 200px;
  93.     height: 260px;
  94.     display: block;
  95.     position: absolute;
  96.     top: 0px;
  97.     transition: all 1s ease-in-out;
  98. }
  99. /*左边*/
  100. .left-plane{
  101.     transform: rotateZ(0deg);
  102.     transform-origin: 100% 50% 0;
  103.     left: 0;
  104. }
  105. /*右边*/
  106. .right-plane{
  107.     transform: rotateZ(0deg);
  108.     transform-origin: 0% 50%;
  109.     left: 199px;
  110. }
  111. /*左右机身的公共样式*/
  112. .wing{
  113.     position: absolute;
  114.     transform-origin: 0 0 0;
  115.     perspective: 1px;
  116.     perspective-origin: 50% 50%;
  117.     backface-visibility: hidden;
  118.     transition: all 1.3s linear;
  119.     box-sizing: border-box;
  120.     margin: 0;
  121.     padding: 0;
  122.     background: none;
  123.     border: none;
  124.     border-top: 240px solid hsla(0, 0%, 0%, 0);
  125.     border-bottom: 0px solid hsla(0, 0%, 0%, 0);
  126.     border-right: 100px solid hsl(0, 0%, 88%);
  127.     width: 0;
  128.     height: 0;
  129.     bottom: 0;
  130. }
  131. /*绘制  飞机2d 雏形*/
  132. .wing1 {
  133.     transform-origin: 100% 100%;
  134.     transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) skewY(-22.62deg);/*2D图像的偏移 旋转*/
  135. }
  136.  
  137. .wing2 {
  138.     transform: rotateZ(22.62deg);
  139.     transform-origin: 100% 100%;
  140.     border-left: 100px solid hsl(0, 0%, 88%);
  141.     border-right: none;
  142.     left: 100px;
  143. }
  144.  
  145. .wing3 {
  146.     transform: rotateZ(-22.62deg);
  147.     transform-origin: 0% 100%;
  148.     border-right: 100px solid hsl(0, 0%, 88%);
  149. }
  150.  
  151. .wing4 {
  152.     transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) skewY(22.62deg);
  153.     transform-origin: 0% 100%;
  154.     border-right: none;
  155.     border-left: 100px solid hsl(0, 0%, 88%);
  156.     left: 100px;
  157. }
  158. /*绘制可折叠区域*/
  159. .left-top.fold{
  160.     position: absolute;
  161.     transform-origin: 100px 112px;
  162.     transition-delay: 1300ms;
  163.     width: 0;
  164.     height: 0;
  165.     top: 0;
  166.     border-right: 202px solid hsla(0, 0%, 0%, 0);
  167.     border-bottom: 202px solid hsla(0, 0%, 0%, 0);
  168.     border-top: 222px solid hsl(0, 0%, 88%);
  169. }
  170. .right-top.fold{
  171.     position: absolute;
  172.     right: 0;
  173.     border-left: 202px solid hsla(0, 0%, 0%, 0);
  174.     border-bottom: 202px solid hsla(0, 0%, 0%, 0);
  175.     border-top: 222px solid hsl(0, 0%, 88%);
  176.     transform-origin: 96px 112px;
  177.     transition-delay: 1650ms;
  178. }
  179. .left-bottom.fold{
  180.     position: absolute;
  181.     transform-origin: 109px 0;
  182.     transition-delay: 2100ms;
  183.     width: 109px;
  184.     height: 38px;
  185.     background: hsl(0, 0%, 88%);
  186.     bottom: 0;
  187.     left: 0;
  188. }
  189. .right-bottom.fold{
  190.     position: absolute;
  191.     transform-origin: 0 0;
  192.     transition-delay: 2450ms;
  193.     width: 109px;
  194.     height: 38px;
  195.     background: hsl(0, 0%, 88%);
  196.     bottom: 0;
  197.     right: 0;
  198. }
  199. /*补全 折叠尾翼 剩余 三角区域*/
  200. .left-bottom.fold:after {
  201.     position: absolute;
  202.     content: "";
  203.     border-right: 92px solid hsla(0, 0%, 0%, 0);
  204.     border-bottom: 39px solid hsl(0, 0%, 88%);
  205.     border-top: 37px solid hsla(0, 0%, 0%, 0);
  206.     left: 109px;
  207.     bottom: 0;
  208. }
  209.  
  210. .right-bottom.fold:after {
  211.     position: absolute;
  212.     content: "";
  213.     border-left: 92px solid hsla(0, 0%, 0%, 0);
  214.     border-bottom: 39px solid hsl(0, 0%, 88%);
  215.     border-top: 37px solid hsla(0, 0%, 0%, 0);
  216.     left: -92px;
  217.     bottom: 0;
  218. }
  219.  
  220. /****************************/
  221. /****此处开始配合js*****/
  222. /*折叠效果*/
  223. .fold {
  224.     transition: transform 800ms ease-out;
  225.     backface-visibility: hidden;
  226.     position: absolute;
  227.     background-color: transparent;
  228.     z-index: 0;
  229.     width: 0;
  230. }
  231. /* 折叠效果（左机翼、左尾翼） */
  232. .left-top.fold.curved {
  233.     transform: rotate3d(1,-1.11,0,180deg);
  234. }
  235.  
  236. .left-bottom.fold.curved {
  237.     transform: rotate3d(2.4867,1,0,-180deg);
  238. }
  239. /* 折叠效果（右机翼、右尾翼）*/
  240. .right-top.fold.curved {
  241.     transform: rotate3d(1,1.11,0,180deg);
  242. }
  243.  
  244. .right-bottom.fold.curved {
  245.     transform: rotate3d(-2.4867,1,0,180deg);
  246. }
  247.  
  248. /* 平放一整个飞机 */
  249. .airplane.hover {
  250.     transform: rotateX(54deg) rotateY(-10deg) rotateZ(25deg);
  251.     transition-delay: 0.5s;
  252. }
  253. /*放平之后 左侧整体倾斜 （体现折叠效果）*/
  254. .backup-end.hover .left-plane {
  255.     transform: rotateY(60deg);
  256. }
  257.  
  258. .backup-end.hover .right-plane {
  259.     transform: rotateY(-60deg);
  260. }
  261. /* 3d视觉中放平 左侧机翼*/
  262. .backup-end.hover .wing1 {
  263.     transform: translateY(-38px) translateX(8px) rotateZ(22.62deg) rotateY(-60deg) skewY(-22.62deg);
  264.     border-right: 100px solid hsl(0, 0%, 95%);
  265. }
  266. /*左侧 飞机手持部位透明度降低*/
  267. .backup-end.hover .wing2 {
  268.     border-left: 100px solid hsl(0, 0%, 85%);
  269. }
  270.  
  271. /* 3d视觉中放平 右侧机翼*/
  272. .backup-end.hover .wing4 {
  273.     transform: translateY(-38px) translateX(-8px) rotateZ(-22.62deg) rotateY(60deg) skewY(20deg);
  274.     border-left: 100px solid hsl(0, 0%, 95%);
  275. }
  276.  
  277. /*右侧 飞机手持部位透明度降低*/
  278. .backup-end.hover .wing3 {
  279.     border-right: 100px solid hsl(0, 0%, 71%);
  280. }
  281.  
  282. /*机翼 折叠效果（右机翼、右尾翼） 之后 多余部分隐藏掉*/
  283. .backup-end.hover .curved {
  284.     display: none;
  285. }
  286.  
  287. /* #wind_container.hover .wing {
  288.     backface-visibility: visible;
  289. } */
  290.  
  291.  
  292. /* 飞机后退助跑 */
  293. .backup-end.hover.fly_away_first {
  294.     transform: translateX(-100px) translateZ(300px) rotateX(42deg) rotateY(-11deg) rotateZ(27deg);
  295.     transition-delay: 0ms;
  296.     transition-duration: 0.4s;
  297.     transition-timing-function: ease-out;
  298. }
  299. /* 飞机向前飞翔至消失 */
  300. .backup-end.hover.fly_away_first.fly_away {
  301.     transform: translateX(600px) translateY(-400px) translateZ(-5000px) rotateX(66deg) rotateY(-12deg) rotateZ(36deg);
  302.     transition: transform 2s ease-out, opacity 1.5s 0.5s linear;
  303.     opacity: 0;
  304. }

js:

  1. // 童年的纸飞机
  2. const fly = document.getElementsByClassName('fly')[0];
  3. const front = document.getElementsByClassName('front-end')[0];
  4. const backup = document.getElementsByClassName('backup-end')[0];
  5. const fold = document.getElementsByClassName('fold');
  6. fly.addEventListener('click', () => {
  7.     first().then(second).then(third).then(fourth).then(fifth).catch((err)=> {
  8.         console.log(err)
  9.     });
  10. }, false);
  11. // 第一步
  12. function first() {
  13.     return new Promise((suc, err) => {
  14.         setTimeout(() => {
  15.             // 隐藏信息面板
  16.             front.classList.remove('show-front');
  17.             // 翻转至正面
  18.             backup.classList.remove('show-backup');
  19.             // 折叠效果（左翼、右翼）
  20.             for (let i = 0; i < fold.length; i++) {
  21.                 fold[i].classList.add('curved')
  22.             }
  23.             // 颜色变换
  24.             document.body.style.backgroundColor = "#54575A";
  25.             suc(1)
  26.         }, 200)
  27.     })
  28. }
  29. function second() {
  30.     return new Promise((suc, err) => {
  31.         setTimeout(function () {
  32.             backup.classList.add('hover');
  33.             document.body.style.backgroundColor = "#AD8BD8";
  34.             suc(2)
  35.         }, 2800);
  36.     })
  37. }
  38. //步骤三：飞机后退助跑
  39. function third() {
  40.     return new Promise((suc, err) => {
  41.         setTimeout(function () {
  42.             backup.classList.add('fly_away_first');
  43.             document.body.style.backgroundColor = "#6E99C4";
  44.             suc(3)
  45.         }, 2000);
  46.     })
  47. }
  48. // 步骤四：飞机向前飞翔至消失
  49. function fourth() {
  50.     return new Promise((suc, err) => {
  51.         setTimeout(function () {
  52.             backup.classList.add('fly_away');
  53.             document.body.style.backgroundColor = "#3F9BFF";
  54.             suc(4)
  55.         }, 600);
  56.     })
  57. }
  58. function fifth() {
  59.     return new Promise((suc, err) => {
  60.         setTimeout(function () {
  61.             front.classList.add('show-front');
  62.             backup.classList.remove('fly_away','fly_away_first','hover');
  63.             backup.classList.add('show-backup');
  64.             for (let i = 0; i < fold.length; i++) {
  65.                 fold[i].classList.remove('curved')
  66.             }
  67.             document.body.style.backgroundColor = "#000";
  68.             suc(5)
  69.         }, 3000);
  70.     })
  71. }

总结

以上所述是小编给大家介绍的CSS3 实现童年的纸飞机 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

 友情链接：直通硅谷 　点职佳 　北美留学生论坛

CSS3热门文章

  • CSS3选择器新增问题的实现_css3_CSS
  • CSS3实现列表无限滚动/轮播效果_css3_CSS
  • CSS3 Tab动画实例之背景切换动态效果_css3_CSS
  • Github上流行的CSS3动画效果库 animate.css
  • CSS3通过var()和calc()函数实现动画特效_css3_CSS
  • CSS3动画之DIY Loading动画
  • CSS中这个函数你会用吗？垂直居中都可以设置
  • 巧用 CSS3的webkit-box-reflect 倒影实现各类动效_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3过渡旋转透视2d3d动画等效果的实例代码_css3_CSS

    • CSS3推荐文章

  • 【动画进阶】神奇的卡片 Hover 效果与 Blur 的特性探究
  • 可视化学习：如何生成简单动画让图形动起来
  • 【布局进阶】巧用 :has & drop-shadow 实现复杂布局效果
  • 【动画进阶】神奇的背景，生化危机4日食 Loading 动画还原
  • 【动画进阶】神奇的 3D 磨砂玻璃透视效果
  • 快速构建页面结构的 3D Visualization
  • 详解CSS3.0(Cascading Style Sheet) 层叠级联样式表_css3_CSS
  • CSS3实现的3D隧道效果_css3_CSS
  • CSS3实现的侧滑菜单_css3_CSS
  • CSS3常见动画的实现方式_css3_CSS

    • 本站QQ群：前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

    W3xue 的所有内容仅供测试，对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
    关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接（目前9元/月）请联系QQ：27243702 沸活量
    皖ICP备17017327号-2　皖公网安备34020702000426号