柱形圖

 

<div class="box-cont">

                  <div class="zhu-base zhu1 bg-violet anima">

                      <span class="top-txt nowrap c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div>

                  <div class="zhu-base zhu2 bg-orange anima">

                      <span class="top-txt nowrap c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div>

                  <div class="zhu-base zhu3 bg-violet anima">

                      <span class="top-txt nowra c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div>

                  <div class="zhu-base zhu4 bg-violet anima">

                      <span class="top-txt nowrap c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div>

                  <div class="zhu-base zhu5 bg-violet anima">

                      <span class="top-txt nowrap c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div>

                  <div class="zhu-base zhu6 bg-violet anima">

                      <span class="top-txt nowrap c9">¥ 673,581</span>

                      <span class="mid-txt">半包</span>

                  </div> 

              </div>

css:

 

/*柱形圖*/

 

.nowrap{white-space:nowrap;}/*禁止換行*/

.box-cont{ height:100%;position: relative;}

.box-cont .zhu-base{position:absolute;bottom:0;width:29px;height:10px;}

.box-cont .bg-orange{background:#ff7200;}

.box-cont .bg-violet{background:#c8d1f2;}

.box-cont .zhu1{left:0px; background: #ff7200}

.box-cont .zhu2{left:16%;background: #ff4200}

.box-cont .zhu1 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu2 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu3 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu4 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu5 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu6 .top-txt{left: -16px;top: -42px;}

.box-cont .zhu3{left:37%;background: #5ac6f7}

.box-cont .zhu4{left:53%;background: #00a0e9}

.box-cont .zhu5{left:75%;background: #00a0e9}

.box-cont .zhu6{left:91%;background: #00a0e9}

.box-cont .zhu1.anima{height:45px;-webkit-animation:height .6s 0.1s ease backwards}

.box-cont .zhu2.anima{height:86px;-webkit-animation:height .6s 0.9s ease backwards}

.box-cont .zhu3.anima{height:58px;-webkit-animation:height .6s 1.7s ease backwards}

.box-cont .zhu4.anima{height:115px;-webkit-animation:height .6s 2.5s ease backwards}

.box-cont .zhu5.anima{height:65px;-webkit-animation:height .6s 3.3s ease backwards}

.box-cont .zhu6.anima{height:129px;-webkit-animation:height .6s 4.1s ease backwards}

@-webkit-keyframes height{

    0%{

        height:0;opacity: 0;

    ;}

    100%{

        -webkit-transition:none;

        -ms-transform:none;

        transition:none;

        opacity: 1;

    }

}

.top-txt{ position: absolute;top:0px;left:0px; color: #ff4200;display: none; }

.anima .top-txt{display: block}

.top-txt.c9{ color: #999}

.mid-txt{

  position: absolute;bottom: 10%;left:4%;

  display: block;text-align: center;

  color: #fff;font-size: 12px;z-index: 999;

}