Question

我有一个名为time-box的div。有时我还会包含一个名为countdown的附加类。如果添加countdown，那么我想使用CSS过渡效果，因此背景在60秒的过程中变为红色。换句话说，通过红色背景的每一秒都会变得更宽，直到最终所有的绿色背景都消失了。

我在这里发现了类似的帖子，但它们似乎都与hover

有关

这是一个小提琴

https://jsfiddle.net/e2vbheew/

Answer 1

我不知道从左到右获得你想要的东西的“简单”方法，但有一种方法可以使用伪元素之前和之后创建它。这里的关键是我要创建一个：在具有新背景转换的伪元素之前，以及：复制内容并将其置于之前的伪元素之后，因此它仍然可见。这需要将内容放在div的属性中，以便我可以在伪元素的“内容”中引用它。如果你内部有更复杂的内容，你可能会取消：after并简单地给出内部内容位置和z-index以确保它是可见的。这是生成的CSS

.time-box {
  height: 27px;                                 
  text-align: center;
  background-color: #25E57B;    
  font-size:2rem;
  padding:0px;
  font-size:1.2rem;
  text-transform:uppercase;
  padding:3px 5px 3px 5px;;
  font-weight:600;
  height:auto;
  position: relative;
}
.time-box:before {
  background-color: red;
  position: absolute;
  left:0;
  top: 0;
  height: 100%;
  width: 0;
  content: " ";
  transition: width 60s ease;
}
.countdown:after {
  content: attr(data-content);
  width: 100%;
  text-align: center;
  height: 100%;
  position: absolute;
  left: 0;
  top: center;
  z-index: 1;
}
.countdown:before {
    width:100%;
}

并更新了小提琴：https://jsfiddle.net/tunzwqd7/2/

Answer 2

您需要添加最多和更多的数学运算才能使100％可被60整除，但这可以让您走上正确的轨道。目前，此代码每秒更新一次，并在每次迭代时将进度条宽度增加1％。

＆＃13;

var time = 0;
var bar = document.querySelector('.countdown .progress-bar');

window.setInterval(function(){
	time++;
  bar.style.width = time+"%";
}, 1000);

＆＃13;

.time-box {
	height: 27px;									
	text-align: center;
	background-color: #25E57B;	
	font-size:2rem;
	padding:0px;
	font-size:1.2rem;
	text-transform:uppercase;
	padding:3px 5px 3px 5px;;
	font-weight:600;
	height:auto;
  position: relative;
}

.progress-bar {
  display: none;
}

.countdown .progress-bar {
  display: block;
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: red;
  width: 0%;
  z-index: 1;
  transition: all 0.3s ease-out;
}

.countdown p {
  z-index: 2;
  position: relative;
}

＆＃13;

<div class="time-box">
  <p>12:00</p>
  <div class="progress-bar"></div>
</div>

<div class="time-box countdown">
  <p>12:00</p>
  <div class="progress-bar"></div>
</div>

＆＃13;

Answer 3

使用CSS animation属性...

＆＃13;

.time-box {
  height: 27px;
  text-align: center;
  background-color: #25E57B;
  font-size: 2rem;
  padding: 0px;
  font-size: 1.2rem;
  text-transform: uppercase;
  padding: 3px 5px 3px 5px;
  font-weight: 600;
  height: auto;
  position: relative;
  z-index: 1;
}

.time-box.countdown:before {
  content: '';
  width: 0;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  background: red;
  animation: countdown 60s forwards;
  z-index: -1;
}

@keyframes countdown {
  0% {
    width: 0;
  }
  100% {
    width: 100%;
  }
}

＆＃13;

<div class="time-box">
  12:00
</div>

<div class="time-box countdown">
  <span>12:00</span>
</div>

＆＃13;

没有悬停的CSS过渡背景颜色

3 个答案: