持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第9天，点击查看活动详情
演示
感悟
人生要用简单的心境，对待复杂的人生，最无情的不是人，是时间；最珍贵的不是金钱，是情感；最可怕的不是失恋，是心身不全；最舒适的不是酒店，是家里；最难听的不是脏话，是无言；最美好的不是未来，是今天
源码部分讲解
设置容器
<div id="wind">
<div id="plane" class="front">
<textarea class="message">坚硬旳城市没有柔软旳爱情，生活不昰林黛玉，不昰因为忧伤就可以风情万种。</textarea>
<button class="send"> 起飞 </button> <br/>
<div id="plane_bottom">
<a href="javascript:;" id="plane_close"> X </a>
</div>
</div>
<div id="wind_container" class="beginning">
<div id="left-wing">
<div class="top_left curvable"> </div>
<div class="bottom_left curvable"> </div>
<div class="wing wing1"></div>
<div class="wing wing2"></div>
</div>
<div id="right-wing">
<div class="top_right curvable"> </div>
<div class="bottom_right curvable"> </div>
<div class="wing wing3"></div>
<div class="wing wing4"></div>
</div>
</div>
</div>
对翅膀的设定
.wing {
position: absolute;
-webkit-transform-origin: 0 0 0;
-moz-transform-origin: 0 0 0;
-o-transform-origin: 0 0 0;
-ms-transform-origin: 0 0 0;
transform-origin: 0 0 0;
-webkit-perspective: 1;
-moz-perspective: 1;
-ms-perspective: 1;
-o-perspective: 1;
perspective: 1;
-webkit-perspective-origin: 50% 50%;
-moz-perspective-origin: 50% 50%;
-ms-perspective-origin: 50% 50%;
-o-perspective-origin: 50% 50%;
perspective-origin: 50% 50%;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all 1.3s linear;
-moz-transition: all 1.3s linear;
-o-transition: all 1.3s linear;
-ms-transition: all 1.3s linear;
transition: all 1.3s linear;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
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;
}
对样板的样式设置
#plane {
z-index:3;
background: rgba(255, 255, 255, 0.15);
*background: hsl(0, 0%, 88%);
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
padding: 20px;
text-align: center;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-o-backface-visibility: hidden;
backface-visibility: hidden;
width: 400px;
height: 260px;
top: 240px;
-webkit-transition: all 0.8s ease-in-out;
-moz-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
margin: auto;
}
对左右翅膀的细节打磨
#left-wing,#right-wing {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
width: 200px;
height: 260px;
display: block;
position: absolute;
top: 0px;
-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;
}
#left-wing {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transform-origin: 100% 50% 0;
-moz-transform-origin: 100% 50% 0;
-o-transform-origin: 100% 50% 0;
-ms-transform-origin: 100% 50% 0;
transform-origin: 100% 50% 0;
left: 0;
}
#right-wing {
-webkit-transform: rotateZ(0deg);
-moz-transform: rotateZ(0deg);
-o-transform: rotateZ(0deg);
-ms-transform: rotateZ(0deg);
transform: rotateZ(0deg);
-webkit-transform-origin: 0% 50%;
-moz-transform-origin: 0% 50%;
-o-transform-origin: 0% 50%;
-ms-transform-origin: 0% 50%;
transform-origin: 0% 50%;
left: 199px;
}
下面就不在展示了，都是一些比较枯燥的细节打磨关于transition的设定
js对事件的控制
$(function(){
// 纸飞机
// 起飞
$('.send').click(function() {
// 步骤一：隐藏面板、显示飞机、完成折叠效果
setTimeout(function() {
// 隐藏信息面板
$('#plane').removeClass('front');
// 翻转至正面
$('#wind_container').removeClass('beginning');
// 折叠效果（左翼、右翼）
$('.curvable').addClass('curved');
// 颜色变换
$("body").css({"background-color": "#54575A"});
// 步骤二：平放飞机
setTimeout(function() {
$('#wind_container').addClass('hover');
$("body").css({"background-color": "#AD8BD8"});
// 步骤三：飞机后退助跑
setTimeout(function() {
$('#wind_container').addClass('fly_away_first');
$("body").css({"background-color": "#6E99C4"});
// 步骤四：飞机向前飞翔至消失
setTimeout(function() {
$('#wind_container').addClass('fly_away');
$("body").css({"background-color": "#3F9BFF"});
// 步骤五：飞机复位
setTimeout(function(){
$('#plane').addClass('front');
$('#wind_container').removeClass('fly_away fly_away_first hover').addClass('beginning');
$('.curvable').removeClass('curved');
$("body").css({"background-color": "#000"});
},3000);
}, 600);
}, 2000);
}, 2800);
}, 200);
});
// 关闭弹窗
$("#plane_close").click(function(){
$("#wind").fadeOut(200);
});
});
