清风细雨楼

CSS3 实现童年的纸飞机
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

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

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

首先看一下飞机的构造

CSS3 实现童年的纸飞机

灰色区域为可折叠区域

白色区域为机身

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

写之前再补充个知识点：

我们颜色的设置不用rgba，

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

　　　s ： 饱和度 0% -100%

　　　l : 亮度 0% - 100%

先看效果才有动力：

CSS3 实现童年的纸飞机

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 实现童年的纸飞机 ，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com