有没有办法让渐变保留其所应用元素的初始宽度？
我知道渐变只是与它们所应用的元素的尺寸相匹配。尽管如此，有没有办法在视觉上使渐变静态并屏蔽掉不应该可见的部分？
我的目的是让倒计时器在接近其演变的终点时变得更暗。目前，我的渐变保留了左侧和右侧的颜色，同时简单地减少了中间的颜色：
(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回答
-
米脂
使用另一个元素作为窗帘并与 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
有多种方法可以仅用一个元素来实现这一目标：在上面使用额外的白色层和另一个渐变对渐变颜色停止点使用固定值用于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>
随时随地看视频慕课网APP
相关分类
Html5