css3飞机起飞进度条

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

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

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

效果图：


代码如下：

   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  ="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/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  >  

查看更多关于css3飞机起飞进度条的详细内容...