【问题标题】：Creating a dynamic Tank level/meter using html and css使用 html 和 css 创建动态储罐液位/仪表
【发布时间】：2020-10-06 04:22:14
【问题描述】：

我目前在我的项目中创建“储罐计量系统”时遇到问题。我正在使用 MVC，并且通过使用以下标记，我已经实现了这一点：

通过使用：

#container {
    position:absolute;
    margin:0;
    margin-top:-50px;    
    width:100%;
    padding:0;    
    -moz-perspective: 1000px; /*required to make cylinder shape*/
    -webkit-perspective: 1000px;
}
#frame {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    margin-left:5%;
    -moz-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px);
    -webkit-transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg) translate3d(40%, 60px, 175px); 

}
.strip {
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}
.strip div {
    position: fixed;
    background-repeat:repeat;
    border-width: thin 10px;
    color:#ececec;
    vertical-align:central;
    height:130px; /*height and width of tank display*/
    width:12%;
    background-color:rgba(128,128,128,0.99);
    -webkit-border-bottom-right-radius: 2px;
-webkit-border-bottom-left-radius: 2px;
-moz-border-radius-bottomright: 2px;
-moz-border-radius-bottomleft: 2px;
border-bottom-right-radius: 2px;
border-bottom-left-radius: 2px;

-webkit-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
-moz-box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
box-shadow: inset 0px -35px 20px -37px rgba(0,0,0,0.96);
}
.strip div:before {
    content:"";
    position: absolute;
    z-index: -1;
    /*Make this lower so any text appears in front*/

    top: 0;
    right: 0;
    bottom: 50%; /*used for tank level setting*/
    left: 0;
    background: rgba(56,56,56,0.8);



}
.strip .a {

  
     border-top:1px solid black;
    -moz-transform: rotateY(0deg) translateZ(124px);
    -webkit-transform: rotateY(0deg) translateZ(124px)
}
.strip .b {
     border-top:1px solid black;
    -moz-transform: rotateY(15deg) translateZ(124px);
    -webkit-transform: rotateY(15deg) translateZ(124px)
}
.strip .c {
     border-top:1px solid black;
    -moz-transform: rotateY(30deg) translateZ(124px);
    -webkit-transform: rotateY(30deg) translateZ(124px);
}

 .strip .c {
    background: rgb(0,0,0) !important; /* Old browsers */
background: -moz-linear-gradient(top,  rgba(0,0,0,1) 0%, rgba(128,128,128,1) 1%, rgba(128,128,128,1) 9%, rgba(0,0,0,1) 10%, rgba(128,128,128,1) 11%, rgba(128,128,128,1) 19%, rgba(0,0,0,1) 20%, rgba(128,128,128,1) 21%, rgba(128,128,128,1) 29%, rgba(0,0,0,1) 30%, rgba(128,128,128,1) 31%, rgba(128,128,128,1) 39%, rgba(0,0,0,1) 40%, rgba(128,128,128,1) 41%, rgba(128,128,128,1) 49%, rgba(0,0,0,1) 50%, rgba(128,128,128,1) 51%, rgba(128,128,128,1) 59%, rgba(0,0,0,1) 60%, rgba(0,0,0,1) 60%, rgba(128,128,128,1) 61%, rgba(128,128,128,1) 69%, rgba(0,0,0,1) 70%, rgba(128,128,128,1) 71%, rgba(128,128,128,1) 79%, rgba(0,0,0,1) 80%, rgba(128,128,128,1) 81%, rgba(128,128,128,1) 89%, rgba(0,0,0,1) 90%, rgba(128,128,128,1) 91%, rgba(128,128,128,1) 99%, rgba(0,0,0,1) 100%)!important; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,1)), color-stop(1%,rgba(128,128,128,1)), color-stop(9%,rgba(128,128,128,1)), color-stop(10%,rgba(0,0,0,1)), color-stop(11%,rgba(128,128,128,1)), color-stop(19%,rgba(128,128,128,1)), color-stop(20%,rgba(0,0,0,1)), color-stop(21%,rgba(128,128,128,1)), color-stop(29%,rgba(128,128,128,1)), color-stop(30%,rgba(0,0,0,1)), color-stop(31%,rgba(128,128,128,1)), color-stop(39%,rgba(128,128,128,1)), color-stop(40%,rgba(0,0,0,1)), color-stop(41%,rgba(128,128,128,1)), color-stop(49%,rgba(128,128,128,1)), color-stop(50%,rgba(0,0,0,1)), color-stop(51%,rgba(128,128,128,1)), color-stop(59%,rgba(128,128,128,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(60%,rgba(0,0,0,1)), color-stop(61%,rgba(128,128,128,1)), color-stop(69%,rgba(128,128,128,1)), color-stop(70%,rgba(0,0,0,1)), color-stop(71%,rgba(128,128,128,1)), color-stop(79%,rgba(128,128,128,1)), color-stop(80%,rgba(0,0,0,1)), color-stop(81%,rgba(128,128,128,1)), color-stop(89%,rgba(128,128,128,1)), color-stop(90%,rgba(0,0,0,1)), color-stop(91%,rgba(128,128,128,1)), color-stop(99%,rgba(128,128,128,1)), color-stop(100%,rgba(0,0,0,1)))!important; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* IE10+ */
background: linear-gradient(to bottom,  rgba(0,0,0,1) 0%,rgba(128,128,128,1) 1%,rgba(128,128,128,1) 9%,rgba(0,0,0,1) 10%,rgba(128,128,128,1) 11%,rgba(128,128,128,1) 19%,rgba(0,0,0,1) 20%,rgba(128,128,128,1) 21%,rgba(128,128,128,1) 29%,rgba(0,0,0,1) 30%,rgba(128,128,128,1) 31%,rgba(128,128,128,1) 39%,rgba(0,0,0,1) 40%,rgba(128,128,128,1) 41%,rgba(128,128,128,1) 49%,rgba(0,0,0,1) 50%,rgba(128,128,128,1) 51%,rgba(128,128,128,1) 59%,rgba(0,0,0,1) 60%,rgba(0,0,0,1) 60%,rgba(128,128,128,1) 61%,rgba(128,128,128,1) 69%,rgba(0,0,0,1) 70%,rgba(128,128,128,1) 71%,rgba(128,128,128,1) 79%,rgba(0,0,0,1) 80%,rgba(128,128,128,1) 81%,rgba(128,128,128,1) 89%,rgba(0,0,0,1) 90%,rgba(128,128,128,1) 91%,rgba(128,128,128,1) 99%,rgba(0,0,0,1) 100%)!important; /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */

}

.strip .d {
    border-top:1px solid black;
    -moz-transform: rotateY(45deg) translateZ(124px);
    -webkit-transform: rotateY(45deg) translateZ(124px)
}
.strip .e {
    border-top:1px solid black;
    -moz-transform: rotateY(60deg) translateZ(124px);
    -webkit-transform: rotateY(60deg) translateZ(124px)
}
.strip .f {
    border-top:1px solid black;
  
    -moz-transform: rotateY(75deg) translateZ(124px);
    -webkit-transform: rotateY(75deg) translateZ(124px)
}
.strip .g {
    border-top:1px solid black;
    -moz-transform: rotateY(90deg) translateZ(124px);
    -webkit-transform: rotateY(90deg) translateZ(124px)
}
.strip .h {
    border-top:1px solid black;
    -moz-transform: rotateY(105deg) translateZ(124px);
    -webkit-transform: rotateY(105deg) translateZ(124px)
}
.strip .i {
    border-top:1px solid black;
    -moz-transform: rotateY(120deg) translateZ(124px);
    -webkit-transform: rotateY(120deg) translateZ(124px)
}
.strip .j {
    border-top:1px solid black;
    -moz-transform: rotateY(135deg) translateZ(124px);
    -webkit-transform: rotateY(135deg) translateZ(124px)
}
.strip .k {
    border-top:1px solid black;
    -moz-transform: rotateY(150deg) translateZ(124px);
    -webkit-transform: rotateY(150deg) translateZ(124px)
}
.strip .l {
    border-top:1px solid black;
    -moz-transform: rotateY(165deg) translateZ(124px);
    -webkit-transform: rotateY(165deg) translateZ(124px)
}
.strip .m {
    border-top:1px solid black;
    -moz-transform: rotateY(180deg) translateZ(124px);
    -webkit-transform: rotateY(180deg) translateZ(124px)
}
.strip .n {
    border-top:1px solid black;
    -moz-transform: rotateY(195deg) translateZ(124px);
    -webkit-transform: rotateY(195deg) translateZ(124px)
}
.strip .o {
    border-top:1px solid black;
    -moz-transform: rotateY(210deg) translateZ(124px);
    -webkit-transform: rotateY(210deg) translateZ(124px)
}
.strip .p {
    border-top:1px solid black;
    -moz-transform: rotateY(225deg) translateZ(124px);
    -webkit-transform: rotateY(225deg) translateZ(124px)
}
.strip .q {
    border-top:1px solid black;
    -moz-transform: rotateY(240deg) translateZ(124px);
    -webkit-transform: rotateY(240deg) translateZ(124px)
}
.strip .r {
    border-top:1px solid black;
    -moz-transform: rotateY(255deg) translateZ(124px);
    -webkit-transform: rotateY(255deg) translateZ(124px)
}
.strip .s {
    border-top:1px solid black;
    -moz-transform: rotateY(270deg) translateZ(124px);
    -webkit-transform: rotateY(270deg) translateZ(124px)
}
.strip .t {
    border-top:1px solid black;
    -moz-transform: rotateY(285deg) translateZ(124px);
    -webkit-transform: rotateY(285deg) translateZ(124px)
}
.strip .u {
    border-top:1px solid black;
    -moz-transform: rotateY(300deg) translateZ(124px);
    -webkit-transform: rotateY(300deg) translateZ(124px)
}
.strip .v {
    border-top:1px solid black;
    -moz-transform: rotateY(315deg) translateZ(124px);
    -webkit-transform: rotateY(315deg) translateZ(124px)
}
.strip .w {
    border-top:1px solid black;
    -moz-transform: rotateY(330deg) translateZ(124px);
    -webkit-transform: rotateY(330deg) translateZ(124px)
}
.strip .x {
    border-top:1px solid black;
    -moz-transform: rotateY(345deg) translateZ(124px);
    -webkit-transform: rotateY(345deg) translateZ(124px);

}

<div class="tankWidget">
        <div class="banner">Tank 1: Kero</div>
       
        <div id="container">
            <div id="frame">
                <div class="strip">
                    <div id="tank1FrameA"class="a">50%</div>
                    <div class="b"></div>
                    <div class="c"></div>
                    <div class="d"></div>
                    <div class="e"></div>
                    <div class="f"></div>
                    <div class="g"></div>
                    <div class="h"></div>
                    <div class="i"></div>
                    <div class="j"></div>
                    <div class="k"></div>
                    <div class="l"></div>
                    <div class="m"></div>
                    <div class="n"></div>
                    <div class="o"></div>
                    <div class="p"></div>
                    <div class="q"></div>
                    <div class="r"></div>
                    <div class="s"></div>
                    <div class="t"></div>
                    <div class="u"></div>
                    <div class="v"></div>
                    <div class="w"></div>
                    <div class="x"></div>
                </div>
            </div>
        </div>
        
   
       

        <div class="widget-footer">
            <table id="specTab1">
                <tr><th>Volume</th><th>Capacity</th><th>Ullage (AL)</th></tr>
                <tr id="tank1"><td id="tank1Vol">50L</td><td>100L</td><td>1.24</td></tr>
            </table>
            <br />
            <div class="lowerWidget-footer">
                <br />
                Details
            </div>
        </div>
    </div>

但是，我现在希望让它动态化。（即浅灰度级根据 '.a' 条带内的值（在本例中为 50%）而变化。

我正在使用：

        var test = $('#tank1FrameA').text(); //gets value of first tank
        test = parseInt(test);

提取50。

但是，由于我无法定位 :beforepseudo 元素来编辑“高度/级别”，我还能如何实现这种调平/动态能力？

一般;

+-------------+
|    50%      | <-- value to use
|             |
+-------------+ <-- this level should change
|             |
|             |
+-------------+

25%：

+-------------+
|    25%      | <-- value to use
|             |
|             |
+-------------+ <-- this level should change
|             |
+-------------+

等等等等

有什么建议可以用这个圆柱体来完成吗？

Here 是一个可运行/可编辑的 jsfiddle。

最初创建时

坦克，我正在寻找编辑：

.strip div:before {

的底部属性来实现这一点。

但是，我最近发现伪元素不是 DOM 的一部分，因此 JQuery 无法访问（尽管它可能很强大）。

【问题讨论】：

为什么不用 SVG？
@SPRBRN 我不太确定在这种情况下这对我有什么帮助？
bernii.github.io/gauge.js 或 justgage.com 怎么样
@mplungjan 我宁愿不包含更多外部库，而且我想保留圆柱形状，因为它与“正常”坦克的形状有关
恐怕在这种情况下它对你没有帮助。 SVG 意味着重新开始。这只是一个建议。坦克真的是圆的，你可以用javascript让它交互。

标签： jquery html css css-shapes

【解决方案1】：

如果您只需要填充水箱，您可以使用更简单的结构来构建水箱，其中包含两个 HTML 元素，border-radius 和一个伪元素。

然后可以用JS根据.tkdiv的自定义数据属性data-amount中输入的值来改变绿色区域的高度：

DEMO（更改.tk div中的自定义数据属性data-amount的值来改变液体的高度）。

var amount = $('.tk').attr('data-amount'),
    height = amount * 80/100 + 20;

$('.lq').css({height : height + '%'});

.tk{ /*Liquid Section*/
    position:relative;
    width:40%; 
    height:130px;
    padding-top:50px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;

}
.tk:after, .lq{
    content:'';
    position:absolute;
    top:0; left:0;
    width:100%;
    height:20%;
    z-index:-1;
}
.lq{
    background:rgba(128,128,128,0.99);
    height:80%;
    top:-2px;
    border-radius:100%/40px;
    border-bottom:3px solid #000;
}
.tk:after{
    height:20%;
    border:1px solid #000;
    border-radius:100%; /*makes circle at top*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="tk" data-amount="40">
    40%
    <div class="lq"></div>
</div>

【讨论】：

谢谢你我有this 到目前为止，但它仍然不太正确（10% 还没有真正工作。但我为你的努力鼓掌:)）
@jbutler483 好的，这需要计算，因此您需要使用自定义数据属性，请参见此处：jsfiddle.net/webtiki/orvrzk4w/4 更改 data-amount 的值以更改罐中液体的高度。跨度>
非常好的解决方案。 :-) 今天使用内置标签可能更简单？

【解决方案2】：

虽然@web-tiki 的回答非常好并且被接受，但我认为我必须为简单的用例添加另一个选项。

在提出问题时，以下内容可能不可用或未被广泛采用，因为它涉及 HTMl5 标记 </meter>

如果伪 3d 效果不是必须的，您可以使用 <meter> element 中内置的不太知名的 HTML5。我过去偶尔使用它。

基本语法：

<meter id="fuel" name="fuel-so-so"
       min="0" max="100"
       low="33" high="66" optimum="80"
       value="50">
    at 50/100
</mete

它基本上是为此类任务设计的，您唯一需要做的就是将其旋转 90（或 270）度。为此，您可以使用 CSS。 (Fiddle)

也很容易styled。其他示例 here 和 here。

当然，它不会产生开箱即用的完全相同的效果（就像接受的答案一样），但我认为对于将来遇到这个问题的用户来说，它仍然是一个值得一提的选项。（并且有一些透明的png覆盖，它实际上可以完全一样..）

对于JS部分，一个简单的document.getElementById('fuel').setAttribute('value', myValue);should do the trick。

另一个有点相关的 SO 问题，用很好的小提琴来演示动态控制：how to change <meter> values?

【讨论】：

【解决方案3】：

我想我已经达到了要求，通过玩定位（绝对将尊重具有相对或绝对位置的父块元素 - 所以使用底部更容易：0 - 这也使得 div 增加它的高度自动从底部到顶部）

html

<div class="tk">
<h3 class="text"></h3>
  <div class="lq" data-amount="69">
    <div class="ring"></div>
  </div>
</div>

css 文件：

.tk {
    position:relative;
    width:40%; 
    height:100px;
    padding-top:40px;
    margin: 0 auto;
    background:rgba(56,56,56,0.8);
    border-radius: 100%/40px;
    border-bottom:3px solid #000;
    text-align:center;
    z-index:1;
    overflow:hidden;
    }
    
.lq {
  position: absolute;
  background:rgba(128,128,128,0.99);
  width: 100%;
  height:0;
  bottom: 0;
  border-radius:100%/40px;
  border-bottom:3px solid #000;
}


.ring {
  position: absolute;
  border-radius:100%;
  top: 0;
  width: 100%;
  height:40%;
  content: '';
  border:1px solid #000;
}
    
.text {
  display: block;
  position:absolute;
  top: 45%;
  left: 45%;
  z-index: 1;
}

js 文件（带有 jquery）：

var quantity = amount;
$(this).find('.lq').animate({'height' : parseInt(amount) + '%'},1000);
  $('.ring').css({height : 100 - amount + 10 + '%'});
  $('.text').text(quantity  + '%'); 
  });
  $('.text').each(function(){
    var $this = $(this);
     jQuery({ Counter: 0 }).animate({ Counter: $this.text() }, {
    duration: 1000,
    easing: 'swing',
    step: function () {
      $this.text(Math.ceil(this.Counter) + "%");
    }
  });
  });
});

https://jsfiddle.net/DimK10/oqfz56ys/72/

【讨论】：