怎样用CSS实现折叠纸飞机并飞出去的动画？
发布时间：2022-04-11 17:18:05 所属栏目：语言 来源：互联网
导读：大家童年都有折过纸飞机的吧，今天我们就来看看如何用代码来实现。文中分享的示例用CSS+JS实现了折叠纸飞机并飞出去的动画效果，实现效果及代码如下，感兴趣的朋友接下来就跟随小编往下看吧。 首先看一下飞机的构造 灰色区域为可折叠区域 白色区域为机身 三
|
大家童年都有折过纸飞机的吧，今天我们就来看看如何用代码来实现。文中分享的示例用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> /*点击后旋转*/ .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。 （编辑：东莞站长网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
