沒有懸停的CSS過渡背景顏色

Question

我有一個叫time-box的div。有時我還會增加一個名爲countdown的課程。如果添加countdown，那麼我想使用CSS過渡效果，以便背景在60秒內變爲紅色。換句話說，通過紅色背景的每秒會變得更寬一些，直到最終所有的綠色背景消失。

我已經在這裏發現了類似的職位，但他們似乎都涉及到hover

這裏是一個小提琴

https://jsfiddle.net/e2vbheew/

Answer 1

使用CSS animation財產......

.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%; 
 
    } 
 
}

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

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

Answer 2

我不知道一個「簡單」的方式得到你想要的從左到右，但有一種方法可以使用僞元素之前和之後創建它。這裏的關鍵是我要創建一個：在僞元素之前有一個新的背景可以轉換，並且：在僞元素之後複製內容並將其放在之前，所以它仍然可見。這需要將內容放入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 3

您將需要一個最大和多一點的數學增加了60，使100％整除，但這應該讓你在正確的軌道上。目前，此代碼每秒更新一次，並在每次迭代時將進度條寬度增加1％。

var time = 0; 
 
var bar = document.querySelector('.countdown .progress-bar'); 
 

 
window.setInterval(function(){ 
 
\t time++; 
 
    bar.style.width = time+"%"; 
 
}, 1000);

.time-box { 
 
\t height: 27px; \t \t \t \t \t \t \t \t \t 
 
\t text-align: center; 
 
\t background-color: #25E57B; \t 
 
\t font-size:2rem; 
 
\t padding:0px; 
 
\t font-size:1.2rem; 
 
\t text-transform:uppercase; 
 
\t padding:3px 5px 3px 5px;; 
 
\t font-weight:600; 
 
\t 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; 
 
}

<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>