Question

我制作了一个非常独特的进度条，在视觉上看起来就像一个装满液体的玻璃球。不幸的是，由于圆形的形状，传统的修改高度的方法并不能很好地工作（正如这个小提琴https://jsfiddle.net/usuwvaq5/2/所示）。

正如你所看到的，让div高度向上滑动＆＃34;不是理想的视觉效果。我也试过用css clip玩一下，但是无法让它为我工作。如何创建玻璃的视觉效果＆＃34;填充＆＃34;用第二张图片？

Answer 1

只需将background-position:bottom;添加到#inner-progress：

#inner-progress {
  background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
  background-color: transparent;
  background-position:bottom;
  width: 100%;
  overflow: hidden;
  position: absolute;
  bottom: 0;
  height: 0%;
}

JSFiddle Demo

Answer 2

Jacob Gray可能有最好的答案，但这里有另一种选择：

Fiddle

此方法使用 css 作为动画，而非 javascript 。 JS仅用于触发动画，其余为css。

这使用css transition属性来“动画”高度，因为它从100％变为0％。 html中唯一值得注意的变化是我将inner的背景与outer交换。

也许这个答案对未来这个线程的读者来说是一个更好的解决方案 - 取决于他们的实现和/或偏好。

$(document).ready(function() {
  $('#inner-progress').addClass("load");
});

#outer-progress {
    background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_bar.png);
    background-color: transparent;
    border: 0;
    height: 100px;
    width: 100px;
    position: relative;
}

#inner-progress {
  background-image: url(https://www.novilar.com/img/battle/ui/purification_meter_background.png);
  background-color: transparent;
  width: 100%;
  overflow: hidden;
  position: relative;
  bottom: 0;
  height: 100%;
    transition: height 3s;
  -webkit-transition: height 3s;
}

.progress-value {
  color: #FFF !important;
  font-weight: bold;
  position: absolute;
  top: 40%;
  left: 40%;
}

.load{
  height: 0% !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="outer-progress">
  <div id="inner-progress" value="0" max="100"></div>
  <span class="progress-value">0%</span>
</div>

如何设置圆形垂直加载进度条的样式？

2 个答案: