Question

我正在尝试创建一个进度条并使用css3过渡来为其填充效果。

jsfiddle here

当我给它一个固定大小时，它会照常工作，但问题是当我设置background-size:100%时，填充变得拉伸。

如何使用background-size:100%创建填充效果？

Progressbar1具有固定的width和background-size

Progressbar2有100％width和background-size

Answer 1

/* PROGRESS */
.progress {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 24em;
}
.progress-bar {
  animation-duration: 3s;
  animation-name: width;
    background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px);
  background-size: 24em 0.25em;
  height: 100%;
  position: relative;
  width:100%
}

.progress2 {
  background-color: #e5e9eb;
  height: 0.25em;
  position: relative;
  width: 100%;
}
.progress-bar2 {
  animation-duration: 3s;
  animation-name: width;
    background-image: repeating-linear-gradient(to right, transparent, #000 50px, #fff 100px, transparent 150px);
  background-size: 100% 0.25em;
  height: 100%;
  position: relative;
  width:100%
}

/* ANIMATIONS */
@keyframes width {
  0%, 100% {
    transition-timing-function: cubic-bezier(1, 0, 0.65, 0.85);
  }
  0% {
    width: 0%;
  }
  100% {
    width: 100%;
  }
}

<div class="progress">
    <div class="progress-bar">
    </div>
</div>
<br>
<div class="progress2">
    <div class="progress-bar2">
    </div>
</div>

使用线性渐变的CSS3过渡中的奇怪行为

1 个答案: