利用html实现进度条效果的方法

 5161

利用html实现进度条效果的方法


html代码:

  1. <div class="progress"  style="height: 80px;line-height: 80px;">
  2.     <span class="orange" style="width: 100%;"></span>
  3. </div>

css代码:

  1. .progress {
  2.     height:10px;
  3.     background:#ebebeb;
  4.     border-left:1px solid transparent;
  5.     border-right:1px solid transparent;
  6.     border-radius:10px;
  7. }
  8. .progress > span {
  9.     position:relative;
  10.     float:left;
  11.     margin:0 -1px;
  12.     min-width:30px;
  13.     height:10px;
  14.     line-height:16px;
  15.     text-align:right;
  16.     background:#cccccc;
  17.     border:1px solid;
  18.     border-color:#bfbfbf #b3b3b3 #9e9e9e;
  19.     border-radius:10px;
  20.     background-image:-webkit-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
  21.     background-image:-moz-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
  22.     background-image:-o-linear-gradient(top,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
  23.     background-image:linear-gradient(to bottom,#f0f0f0 0%,#dbdbdb 70%,#cccccc 100%);
  24.     -webkit-box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);
  25.     box-shadow:inset 0 1px rgba(255,255,255,0.3),0 1px 2px rgba(0,0,0,0.2);
  26. }
  27. .progress .orange {
  28.     background:#FE8E01;
  29.     border-color:#FE8E02 #FE8E02 #BF6B02;
  30.     background-image:-webkit-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);
  31.     background-image:-moz-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);
  32.     background-image:-o-linear-gradient(top,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);
  33.     background-image:linear-gradient(to bottom,#FEAA41 0%,#FE8E02 70%,#FE8E01 100%);
  34. }


TAG标签:
本文网址:https://www.zztuku.com/detail-7973.html
站长图库 - 利用html实现进度条效果的方法
申明:如有侵犯,请 联系我们 删除。

评论(0)条

您还没有登录,请 登录 后发表评论!

提示:请勿发布广告垃圾评论,否则封号处理!!

    编辑推荐

    PHPCMS系统mysql优化教程