轩枫阁

首页 / Web前端 / CSS / 基于CSS3实现的纸飞机折叠飞翔动画过程

基于CSS3实现的纸飞机折叠飞翔动画过程

前言

也许你有注意到本站的logo,点击之后,会产生一个纸飞机飞翔的过程,是一个3D动画效果,目前仅支持webkit内核浏览器预览效果。

demo地址

http://xuanfengge.com/demo/201402/plane

实现原理

整个动画过程包括

消息面板翻转、飞机两翼折叠、飞机平放预备飞行、飞机后退助跑、飞机向前飞翔、整个过程的背景颜色过渡。

简单解析

主要的动画效果(步骤分解状态)使用CSS3的变形(transform)、转换(transition)、动画(animation)、视图距离(perspective)等等新属性实现,并结合js的setTimeout控制动画时间,通过增减css的class来实现整个过程动画。

效果预览

plane-s

步骤分解

步骤一

隐藏面板、显示飞机

1

 

完成折叠效果

2

 

步骤二

平放飞机

3

 

步骤三

飞机后退助跑

4

 

步骤四

飞机向前飞翔至消失

5

 

步骤五

飞机复位

 

技术点学习资源

CSS3属性详解:http://www.w3cplus.com/resources/css3-tutorial-and-case

理解rotate3d旋转:http://hi.baidu.com/alimyself/item/f9bf76ab91ccb6d15af1916d

CSS3 Transform的perspective属性:http://www.alloyteam.com/2012/10/the-css3-transform-perspective-property/

 

代码实现

JS代码

 

HTML结构

CSS代码

 

256/470
258/470

相关阅读

文章评论

  • 之前来看过这个文章,现在又看,怎么感觉飞机后退助跑没有之前逼真了,现在后退幅度很小。

  • 好难..css3好溜..啃代码中

    • [good]

  • 家里买了台42寸的电视机,比之前那台21寸的大了很多。我们一家人都很开心,还记得姥姥当时问我,“这下新闻联播里的那俩主持人能看全身了吧?”

  • 能发一份源文件吗,

    • 其实Chrome查看源代码,就可以看到全部的代码了,自己折腾一下吧

  • Lee

    怎么改变飞机的大小

    • 改变CSS样式,具体要Chrome调一下吧

  • 不错,网站做的很好啊。我是半路出家的,这个和尚不好当啊

纸飞机许愿

x

钢琴节奏

请选择弹奏的曲谱

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 1
    • 2

    [返回曲谱列表]

    点击开始录制,可以录制弹奏的曲子