文章/答案/技术大牛

发布

社区首页 >问答首页 >是否有一种方法可以让梯度保留它所应用的元素的初始宽度？

问是否有一种方法可以让梯度保留它所应用的元素的初始宽度？
EN

Stack Overflow用户

提问于 2020-03-28 16:44:02

回答 2查看 57关注 0票数 4

我知道梯度只是匹配它们应用到的任何元素的尺寸。虽然，是否有一种方法使渐变静态和遮掩部分不应该是可见的？

我的意图是让倒计时时间变得更暗，因为它接近它的进化结束。目前，我的渐变保留了左边和右边的颜色，同时简单地减少了两者之间的颜色：

(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 lang="en">

<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是一个坚实的颜色，这基本上就是我所追求的。然而，这会导致比它解决的更多的问题；因为现在我必须修复我的倒计时器，而且我似乎无法使它看起来像以前那样：

(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: linear-gradient(to right, #6419cd, #3273fa);
}


/* Fill */

#countdown-evolution {
  height: 100%;
  width: 100%;
  transform-origin: left;
  background-color: #ffffff;
}


/* 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 lang="en">

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

我感谢任何能帮助我实现上述结果的建议。谢谢。

javascript

html

css

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-03-28 16:57:38

使用另一个元素作为窗帘和绝对定位以及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>

票数 4

Stack Overflow用户

发布于 2020-03-28 19:37:14

只有一个要素才能实现这一点，有不同的方法：

在上面使用一个额外的白色层，另一个梯度
使用固定的梯度颜色停止
使用background-clip剪辑内容区域中的背景，方法是使用mask层H 210H 111使用伪元素作为额外层H 212G 213动画化填充
。

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

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/60903748

复制

相似问题

问是否有一种方法可以让梯度保留它所应用的元素的初始宽度？
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法可以让梯度保留它所应用的元素的初始宽度？EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否有一种方法可以让梯度保留它所应用的元素的初始宽度？
EN