我知道渐变只是与它们所应用的元素的尺寸相匹配。尽管如此，有没有办法在视觉上使渐变静态并屏蔽掉不应该可见的部分？我的目的是让倒计时器在接近其演变的终点时变得更暗。目前，我的渐变保留了左侧和右侧的颜色，同时简单地减少了中间的颜色：(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 关注
- 70 浏览
添加回答
举报
0/150
提交
取消