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

只是定位＆＃39;填充＆＃39;部分内部＆＃39;未填充＆＃39;，即类似的东西：

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

Answer 2

你应该将填充的条放在未填充的条内，以允许它在它上面绘制

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

JSFiddle：https://jsfiddle.net/z4kn3p40/

条形填充和未填充的条形不重叠

2 个答案: