效果：
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. 欢迎访问我的快站fbengine.kuaizhan.com

    欢迎访问我的快站 fbengine.kuaizhan.com

  2. Unity 热更新实例一、C#Light 和UI系统使用实例

    接下来我会运用热更新的机制,逐步制作一些例子来阐释脚本系统如何和Unity结合. 脚本不限于使用C#Lite,但是C#Lite会有一些便利之处,请往下看. 结合机制也不限于这一种,但是C#Lite的设 ...

  3. JITCompiler、NGen.exe及.NET Native

    一.JITCompiler 如你所知,JIT(just-in-time或“即时”)编译器是CLR的重要组件,它的职责是将IL转换成本地cpu指令. <<CLR via C#>> ...

  4. 实现基于Task的异步模式

    返回该系列目录<基于Task的异步模式--全面介绍> 生成方法 编译器生成 在.NET Framework 4.5中,C#编译器实现了TAP.任何标有async关键字的方法都是异步方法,编 ...

  5. 缓存篇~第八回　Redis实现基于方法签名的数据集缓存~续（优化缓存中的key）

    返回目录 上一讲主要是说如何将数据集存储到redis服务器里,而今天主要说的是缓存里的键名,我们习惯叫它key. redis或者其它缓存组件实现的存储机制里,它将很多方法对应的数据集存储在一个公共的空 ...

  6. 锋利的JQuery —— JQuery性能优化

    大图猛戳

  7. rabbitmq消息队列——"发布订阅"

    三."发布订阅" 上一节的练习中我们创建了一个工作队列.队列中的每条消息都会被发送至一个工作进程.这节,我们将做些完全不同的事情--我们将发送单个消息发送至多个消费者.这种模式就是 ...

  8. js,格式化long类型日期封装

    /** * 扩展date函数 * author:c3gen */ Date.prototype.format = function(format) { var o = { "M+" ...

  9. WebClient.DownloadFile(线程机制，异步下载文件)

    线程机制(避免卡屏),异步下载文件. 我做网站的监控,WebClient.DownloadFile这个方法是我经常用到的,必要的时候肯定是要从网上下载些什么(WebRequest 也可以下载网络文件, ...

  10. 【原创】NIO框架入门(三)：iOS与MINA2、Netty4的跨平台UDP双向通信实战

    前言 本文将演示一个iOS客户端程序,通过UDP协议与两个典型的NIO框架服务端,实现跨平台双向通信的完整Demo.服务端将分别用MINA2和Netty4进行实现,而通信时服务端你只需选其一就行了.同 ...