CSS实现动态水位球效果（纯CSS3样式）

/* 水位球效果样式 */
.liquidFillGauge {
    width: 200px; height: 160px;
    position: relative;
    font-family: 'Tahoma';
    text-align: center;
    font-size: 10px;
    float: left;
    margin: 5px;
}
.liquidFillGauge .liquidFillGaugeText {
    position: absolute;
    text-align: center;
    width: 100%;
    font-size: 10px;
    color: #000000;
    line-height: 160px;
    z-index: 10;
}
.liquidFillGauge .liquidFillGaugeOutline {
    position: absolute;
    border: 1px solid #000000;
    width: 100%;
    height: 100%;
    z-index: 5;
    background-color: #ffffff;
    background-image: -moz-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -moz-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -webkit-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -webkit-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -o-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -o-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -ms-radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), -ms-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: radial-gradient(50% 50%, circle, rgba(220,220,220,0.5) 90%, rgba(128,128,128,0) 100%), linear-gradient(to bottom, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-repeat: no-repeat;
    box-shadow: 0 0 0 1px #000000 inset;
}
.liquidFillGauge .liquidFillGaugeMask {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 6;
    background-image: -moz-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -webkit-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -o-linear-gradient(top, #ff6500, #ff6500 40%, rgba(255,101,0,0));
    background-image: -ms-linear-gradient(