效果：
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热更新全书-PageZero

    由于深刻的认识到自己是个思维跳跃的人,深入浅出是个我还要努力很久的目标,为了让大家不至于在我乱七八糟的文字中迷失,特整理目录一份 无分类 <Unity3D热更新全书-何谓热更新,为何热更新,如何 ...

  2. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  3. Senparc.Weixin.MP SDK 微信公众平台开发教程（十五）：消息加密

    前不久,微信的企业号使用了强制的消息加密方式,随后公众号也加入了可选的消息加密选项.目前企业号和公众号的加密方式是一致的(格式会有少许差别). 加密设置 进入公众号后台的“开发者中心”,我们可以看到U ...

  4. Centos Another app is currently holding the yum lock

    yum命令用ctrl+z命令中断后,再运行yum时,出现: Existing lock /var/run/. Another app is currently holding the yum lock ...

  5. linux环境 c 中如何执行shell命令

    1 system 相当简单: int system(const char *command); system("ps -aux"); 2 popen popen有两个参数,第一个是 ...

  6. Beats数据采集---Packetbeat\Filebeat\Topbeat\WinlogBeat使用指南

    Beats是elastic公司的一款轻量级数据采集产品,它包含了几个子产品: packetbeat(用于监控网络流量). filebeat(用于监听日志数据,可以替代logstash-input-fi ...

  7. C#并行编程-线程同步原语

    菜鸟学习并行编程,参考<C#并行编程高级教程.PDF>,如有错误,欢迎指正. 目录 C#并行编程-相关概念 C#并行编程-Parallel C#并行编程-Task C#并行编程-并发集合 ...

  8. 2.Redis常用命令

    setget 匹配Keykeys *keys na*keys na?e 判断指定的Key是否存在exists key 删除一个或者多个keydel key//删除一个del key1 key2//删除 ...

  9. 实用的开放源码的Excel导入导出类库 CarlosAg ExcelXmlWriter

    做企业管理软件经常会遇到要把数据导出成EXCEL格式,目前市面上有很多工具类库可以实现此功能.CarlosAg ExcelXmlWriter是其中之一,它绿色小巧,免安装,又源码开放,我在项目中一直以 ...

  10. Geometry Curve of OpenCascade BRep

    Geometry Curve of OpenCascade BRep eryar@163.com 摘要Abstract:几何曲线是参数表示的曲线 ,在边界表示中其数据存在于BRep_TEdge中,BR ...