CSS动画和线性渐变中的背景位置无法工作

Question

我想使用CSS3（渐变和动画）制作类似于iPhone滑动解锁渐变的动画。但是，由于某种原因，当我使用百分比时，background-position只能使用静态像素数字才有效。理想情况下，我希望能够将此类应用于任何元素，并使动画工作，而无需针对特定宽度进行编码。有人可以指点我吗？

JSFiddle: https://jsfiddle.net/ekLamtbL/

.slideToUnlock {
  background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
    -webkit-animation: slidetounlock 5s infinite;
    animation: slidetounlock 5s infinite;
    -webkit-animation-direction: normal;
    animation-direction: normal;
}

@-webkit-keyframes slidetounlock {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 100% 0;
  }
}

- mrK

---

考虑使用视口宽度而不是百分比吗？（100vw） - EoghanTadhg

@EoghanTadhg 是指背景百分比还是渐变？ - mrK

将其放置在背景位置：https://jsfiddle.net/7wLtzvLr/ 也许我误解了。 - EoghanTadhg

这会使它循环多次。理想情况下，它应该在整个宽度上移动一次，然后重新开始。 - mrK

Answer 1

已添加您的代码

background-size: 250% 250%;

例子

.slideToUnlock {
  background: linear-gradient(-90deg, black 0%, gray 40%, white 45%, gray 55%, black 60%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  -webkit-animation: slidetounlock 5s infinite;
  animation: slidetounlock 5s infinite;
  -webkit-animation-direction: normal;
  animation-direction: normal;
  background-size: 250% 250%;
}

https://jsfiddle.net/ekLamtbL/2/

- Duc Nguyen

---

你能解释一下为什么在这里使用background-size: 250% 250%吗？ - isevcik

@isevcik Lutymane在他们的回答中实际上已经回答了这个问题。 - John

Answer 2

MDN上的文章解释得很好

tldr： 要使用百分比background-position，您的背景大小不应等于您想要定位的尺寸的100％。 N％位置意味着将N％的背景映射到元素的N％。由于渐变自动具有100％x100％的大小，设置background-position似乎没有效果，除非您将background-size设置为某个值，例如200％

- Lutymane