效果：
http://hovertree.com/texiao/css3/27/

源码下载：
http://hovertree.com/h/bjaf/pgwql1x2.htm

本效果使用Font Awesome显示飞机图标。
font-awesome下载

效果图：

另外的飞机特效：
http://hovertree.com/h/bjaf/hvtplane.htm

代码如下：

<!DOCTYPE html>

<html lang="zh">

<head>

<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Bootstrap飞机跑道进度条动画特效 - 何问起</title><base target="_blank" />

<link rel="stylesheet" href="http://hovertree.com/ziyuan/bootstrap/3.3.6/css/bootstrap.min.css" />

<!--<link rel="stylesheet" href="http://hovertree.com/ziyuan/fontawesome/4p5p0/css/font-awesome.min.css">-->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">

<!--<link rel="stylesheet" href="http://hovertree.com/texiao/css3/27/fontawesome/css/font-awesome.min.css" />-->

<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/css3/27/css/style.css" />

</head>

<body>

<div class="demo">

<div class="container">

<div class="row">

<div class="col-md-offset-3 col-md-6">

<h3 class="progressbar-title">HTML5</h3>

<div class="progress">

<div class="progress-bar" style="width: 55%; background:#005394;">

<span>55%</span>

</div>

</div>

<h3 class="progressbar-title">CSS3</h3>

<div class="progress">

<div class="progress-bar" style="width: 85%; background:#d9534f;">

<span>85%</span>

</div>

</div>

<h3 class="progressbar-title">Java Script</h3>

<div class="progress">

<div class="progress-bar" style="width: 40%; background:#f0ad4e;">

<span>40%</span>

</div>

</div>

</div>

</div>

</div>

</div>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">

<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>

<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/18g2by92.htm">原文</a></p>

</div>

</body>

</html>

转自：http://hovertree.com/h/bjaf/18g2by92.htm

更多特效：http://www.cnblogs.com/roucheng/p/texiao.html

css3飞机起飞进度条的更多相关文章

  1. css3圆形百分比进度条的实现原理

    原文地址:css3圆形百分比进度条的实现原理 今天早上起来在查看jquery插件机制的时候,一不小心点进了css3圆形百分比进度条的相关文章,于是一发不可收拾,开始折腾了... 关于圆形圈的实现,想必 ...

  2. CSS3时钟式进度条

    CSS3时钟式进度条,加载完成时生成一个圆,数字慢慢变成100,适时的显示加载进度.友情提醒,如果预览时网页左下角提示错误,刷新一下就可以看到效果了:实际使用中不会出现这样的问题. <!DOCT ...

  3. CSS3实现圆环进度条

    摘要:圆环进度条被应用于各个场景,比如我们可以用来表示加载进度等.通常我们可以用 css3 的动画去实现. 详解 css3 实现圆环进度条 简单的画一个圆环,我们都知道如何使用 css 画一个圆环.( ...

  4. CSS3实现圆形进度条

    介绍 闲来无事,去了CSS3Plus网站逛了逛,发现了一个很有意思的实现--css3实现进度条.粗略看了下代码,发现原理其实很简单,不难理解. 现在在此讲述下原理并实现一个1s更新的进度条. 技术细节 ...

  5. 【JavaScript】HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

  6. 纯CSS3实现圆形进度条动画

    悄悄地,GIF 格式的进度条已经越来越少,CSS 进度条如雨后春笋般涌现.今天要介绍的这个 CSS3 进度条,效果和 Flyme OS 4 上的加载动画一样. 首先,来看下最终的效果: 它的 HTML ...

  7. css3实现不同进度条

    进度条类型1(渐变进度条) 效果1:图片实现进度条 思路,进度条是一张图片,用定位来控制不同时间图片相对进度条box的left值来控制位置,用animate实现动画效果 html <div cl ...

  8. CSS3创建圆圈进度条

    最近在工作中需要做一个圆圈倒计时,刚开始的想法是做个纯数字的倒计时即可,可是需求觉得这个不太好看,想加个倒计时进度条.于是就有了接下来的分析过程... 我们知道CSS3可以很方便的画圆,圆环,然后在加 ...

  9. HTML5/CSS3实现五彩进度条应用

    今天要介绍的是一款基于HTML5和CSS3的进度条应用,这款进度条是静态的,仅提供进度条的五彩外观.当然你可以在CSS中动态设置进度值来让其变得动态,一个很好的实现方式是利用jQuery动态改变CSS ...

随机推荐

  1. Unity3D ogg下载并播放

    那天说了c#不好弄ogg和mp3的解码,然后就发现打脸了. 找到了一些开源的解码器,由于ogg的音质容量比要明显好于mp3,主要弄ogg的播放. 由于自带解码器,可以实现全平台下载并播放,甚至可以实现 ...

  2. YprogressBar,html5进度条样式,js进度条插件

    简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...

  3. Node.js与Sails~项目结构与Mvc实现

    回到目录 Sails是一个Node.js的中间件架构,帮助我们很方便的构建WEB应用程序,网址:http://www.sailsjs.org/,它主要是在Express框架的基础上发展起来的,扩展了新 ...

  4. Nodejs·理解Buffer

    Node里面的Buffer其实就是用于网络请求.文件读取等等操作,而且是分配在堆外,不会占用堆内的内存,这也是因为本来V8的内存就很小,如果读取大文件,那就...... 之前有看过Logstash的B ...

  5. lua实现深度拷贝table表

    lua当变量作为函数的参数进行传递时,类似的也是boolean,string,number类型的变量进行值传递.而table,function,userdata类型的变量进行引用传递.故而当table ...

  6. Linux下chkconfig命令详解 这个简单明了啊

    chkconfig命令主要用来更新(启动或停止)和查询系统服务的运行级信息.谨记chkconfig不是立即自动禁止或激活一个服务,它只是简单的改变了符号连接. 使用语法:chkconfig [--ad ...

  7. 每天一个linux命令（44）：top命令

    top命令是Linux下常用的性能分析工具,能够实时显示系统中各个进程的资源占用状况,类似于Windows的任务管理器.下面详细介绍它的使用方法.top是一个动态显示过程,即可以通过用户按键来不断刷新 ...

  8. 在忘记root密码的情况下如何修改linux系统的root密码

    1.系统启动时长按shift键后可以看到如下界面:     2.找到 recovery mode 那一行, 按下[e]键进入命令编辑状态,到 linux /boot/vmlinuz-....... r ...

  9. 关于js中sort()排序方法

    第一次写这个,算是记录自己的学习前端的一点点的历程吧.今天在做一个图片的随机排序遇到了一个问题,部分截图如下 我用的是json格式存储数组,想通过排序实现img数组中的内容升序或是降序发现用sort自 ...

  10. ViewPager做图片浏览器，加载大量图片OOM的问题修正

    /** * @author CHQ * @version 1.0 * @date 创建时间: 2016/7/26 17:18 * @parameter * @return * 图片查看器 * //可以 ...