html - Bar fill 和 Bar unfilled 不重叠

Question

我正在尝试创建一个 CSS 进度条，但是由于某种原因，UNFILL 部分(白色背景)没有与作为 FILL 部分的绿色背景重叠。

知道怎么做吗？

还有，由于这是 @Keyframe CSS3，这应该只适用于或不适用于哪个浏览器？

CSS:

.container{
  width: 400px;
  margin: 0 auto;

}

.bar{
  width: 100%;
  background: #141414;
  padding: 17px;
  -webkit-border-top-right-radius: 5px;
-webkit-border-bottom-right-radius: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}

.bar-fill{
  height: 15px;
  display: block;
  background: #45c9a5;
  width: 0%;
  border-radius: 8px;

  -webkit-transition: width 0.8s ease;
  transition: width 0.8s ease;
  -webkit-animation: mymove 5s infinite; 
  animation: mymove 5s infinite;
}


.bar-unfill{
  height: 15px;
  display: block;
  background: #fff;
  width: 100%;
  border-radius: 8px;
}

/* Chrome, Safari, Opera */ 
@-webkit-keyframes mymove {
    from {width: 0%;}
    to {width: 100%;}
} 

/* Standard syntax */ 
@keyframes mymove {
   from {width: 0%;}
    to {width: 100%;}
}



.title{
 background: #545965;
 color: #fff;
 padding: 15px;
 float: left;
 position: relative;
 right: 60px;
-webkit-border-top-left-radius: 5px;
-webkit-border-bottom-left-radius: 5px;
-moz-border-radius-topleft: 5px;
-moz-border-radius-bottomleft: 5px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}

这是 JSFIDDLE:https://jsfiddle.net/xdbb3ypc/1/

谢谢!

请同时提供 JSFIDDLE

Answer 1

只需将“已填充”部分放在“未填充”内，即:

<div class="container">
    <div class="title">Testing</div>
    <div class="bar">
        <span class="bar-unfill">
            <span class="bar-fill"></span>
        </span>
    </div>
</div>