<form id="htvdb"></form>

            <form id="htvdb"><nobr id="htvdb"></nobr></form>

              <address id="htvdb"></address>

              <form id="htvdb"><form id="htvdb"><nobr id="htvdb"></nobr></form></form>
              <form id="htvdb"></form>


                    CSS3彩色进度条动画特效代码下载

                    分享 :

                    网盘下载链接:

                    提取密码: 8sum
                    复制提取密码
                    这是一款CSS3彩色进度条动画特效代码。该进度条通过对bootstrap原生进度条的改造,制作出效果非常炫酷的进度条动画效果。
                    • 详情
                      文件来源

                      网络收集

                      更新日期

                      2018-01-03

                      适用平台

                      All

                      系统位数

                      ALL

                      文件格式

                      zip

                      文件语言

                      中文

                      文件授权

                      免费

                      下载次数

                      34次

                      效果显示:

                    • 使用说明

                      在页面中引入jquery和bootstrap相关文件。

                      <link href="css/bootstrap.min.css" rel="stylesheet">
                      <link href="css/font-awesome.min.css" rel="stylesheet">
                      <script src="js/jquery.min.js"></script>
                      <script src="js/bootstrap.min.js"></script>
                      

                      HTML结构

                      该CSS3进度条的HTML结构如下:

                      <div class="container">
                          <div class="row">
                              <div class="col-md-offset-3 col-md-6">
                                  <h3 class="progress-title">HTML5</h3>
                                  <div class="progress">
                                      <div class="progress-bar" style="width:65%; background:#ef2d56;">
                                          <div class="progress-value">65%</div>
                                      </div>
                                  </div>
                       
                                  <h3 class="progress-title">CSS3</h3>
                                  <div class="progress">
                                      <div class="progress-bar" style="width:87%; background:#ff9900;">
                                          <div class="progress-value">87%</div>
                                      </div>
                                  </div>
                       
                                  <h3 class="progress-title">J-Query</h3>
                                  <div class="progress">
                                      <div class="progress-bar" style="width:55%; background:#82b700;">
                                          <div class="progress-value">55%</div>
                                      </div>
                                  </div>
                       
                                  <h3 class="progress-title">PHP</h3>
                                  <div class="progress">
                                      <div class="progress-bar" style="width:95%; background:#00ebdd;">
                                          <div class="progress-value">95%</div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
                      

                      CSS样式

                      然后通过下面的CSS3代码来对该进度条进行效果的美化,制作炫酷的动画效果。

                      .progress-title{
                          font-size: 18px;
                          font-weight: 700;
                          color: #fff;
                          margin: 0 0 20px;
                      }
                      .progress{
                          height: 20px;
                          background: #171b3c;
                          border-radius: 20px;
                          border: 1px solid #000;
                          box-shadow: 0 2px 2px #4f4c4c;
                          margin-bottom: 40px;
                          overflow: visible;
                          position: relative;
                      }
                      .progress .progress-bar{
                          border-radius: 20px;
                          border:  1px solid #000;
                          -webkit-animation: animate-positive 2s;
                          animation: animate-positive 2s;
                      }
                      .progress .progress-value{
                          width: 65px;
                          height: 25px;
                          line-height: 25px;
                          background: #171b3c;
                          font-size: 15px;
                          color: #fff;
                          border-radius: 0 0 15px 15px;
                          border: 1px solid #000;
                          border-top: none;
                          box-shadow: 0 2px 2px #4f4c4c;
                          position: absolute;
                          bottom: -25px;
                          right: 60px;
                      }
                      @-webkit-keyframes animate-positive{
                          0% { width: 0; }
                      }
                      @keyframes animate-positive{
                          0% { width: 0; }
                      }  
                      
                    • 相关下载
                    北京赛车玩法和赔率|官网_首页