我知道漸變只是與它們所應用的元素的尺寸相匹配。盡管如此，有沒有辦法在視覺上使漸變靜態并屏蔽掉不應該可見的部分？我的目的是讓倒計時器在接近其演變的終點時變得更暗。目前，我的漸變保留了左側和右側的顏色，同時簡單地減少了中間的顏色：(function() { function resetCountdown() { window.requestAnimationFrame(function() { document.getElementById("countdown-evolution").classList.remove("countdown-reset"); window.requestAnimationFrame(function() { document.getElementById("countdown-evolution").classList.add("countdown-reset"); }); }); } resetCountdown(); document.getElementById("countdown-evolution").addEventListener("transitionend", resetCountdown);})();/* Background */#countdown-background { height: 50px; width: 100%; box-sizing: border-box; border: 1px solid #ebebeb; background-color: #ffffff;}/* Fill */#countdown-evolution { height: 100%; width: 100%; transform-origin: left; background: linear-gradient(to right, #6419cd, #3273fa);}/* Reset */.countdown-reset { transition: transform 15s linear; transform: scaleX(0);}/* Reference */.fixed-background { height: 50px; width: 100%; box-sizing: border-box; border: 1px solid #ebebeb; background: linear-gradient(to right, #6419cd, #3273fa);}<!DOCTYPE html><html><head> <meta charset="UTF-8"> <title>Countdown</title></head><body> <div id="countdown-background"> <div id="countdown-evolution"></div> </div> <div class="fixed-background"></div></body></html>我已經嘗試過制作countdown-background漸變和countdown-evolution純色，這基本上就是我所追求的。然而，這帶來的問題比它解決的問題還要多。因為現在我必須修復我的倒計時器，但我似乎無法讓它看起來和以前一樣：
2 回答
米脂
TA貢獻1836條經驗 獲得超3個贊
使用另一個元素作為窗簾并與 css 關鍵幀一起進行絕對定位：
document
.querySelector("#countdown-evolution-curtain")
.addEventListener('animationend', () => {
console.log('Animation ended');
});
/* Background */
#countdown-background {
height: 50px;
width: 100%;
box-sizing: border-box;
border: 1px solid #ebebeb;
background-color: #ffffff;
position: relative;
}
#countdown-background div {
position: absolute;
right: 0;
top: 0;
}
/* Fill */
#countdown-evolution-curtain {
background: #fff;
height: 100%;
width: 0%;
animation: reveal 10s linear;
}
#countdown-evolution {
height: 100%;
width: 100%;
background: linear-gradient(to right, #6419cd, #3273fa);
}
@keyframes reveal {
0% {
width: 0%;
}
100% {
width: 100%;
}
}
<div id="countdown-background">
<div id="countdown-evolution"></div>
<div id="countdown-evolution-curtain"></div>
</div>
慕運維8079593
TA貢獻1876條經驗 獲得超5個贊
有多種方法可以僅用一個元素來實現這一目標：
在上面使用額外的白色層和另一個漸變
對漸變顏色停止點使用固定值
用于
background-clip通過填充動畫來剪輯內容區域中的背景使用
mask圖層使用偽元素作為額外層
/* Reference */
.reference {
height: 50px;
border: 1px solid #ebebeb;
background: linear-gradient(to right, #6419cd, #3273fa);
}
/* (1) */
.first {
background:
linear-gradient(#fff,#fff) right no-repeat,
linear-gradient(to right, #6419cd, #3273fa);
animation:first 5s linear forwards;
}
@keyframes first{
from {
background-size:0% 100%,auto;
}
to {
background-size:100% 100%,auto;
}
}
/* (2) */
.second {
background:linear-gradient(to right, #6419cd 0, #3273fa 100vw) left no-repeat;
animation:second 5s linear forwards;
}
@keyframes second{
from {
background-size:100% 100%;
}
to {
background-size:0% 100%;
}
}
/* (3) */
.third {
background-clip:content-box;
animation:third 5s linear forwards;
}
@keyframes third{
from {
padding-right:0%;
}
to {
padding-right:100%;
}
}
/* (4) */
.fourth {
-webkit-mask:linear-gradient(#fff,#fff) left no-repeat;
mask:linear-gradient(#fff,#fff) left no-repeat;
animation:fourth 5s linear forwards;
}
@keyframes fourth{
from {
-webkit-mask-size:100% 100%;
mask-size:100% 100%;
}
to {
-webkit-mask-size:0% 100%;
mask-size:0% 100%;
}
}
/* (5) */
.fifth{
position:relative;
}
.fifth::before {
content:"";
position:absolute;
background:#fff;
top:0;
right:0;
bottom:0;
animation:fifth 5s linear forwards;
}
@keyframes fifth{
from {
left:100%;
}
to {
left:0%;
}
}
<div class="first reference"></div>
<div class="second reference"></div>
<div class="third reference"></div>
<div class="fourth reference"></div>
<div class="fifth reference"></div>
<div class="reference"></div>
- 2 回答
- 0 關注
- 111 瀏覽
添加回答
舉報
0/150
提交
取消