Question

我正在尝试使用CSS3（渐变和动画）制作类似于iphone幻灯片的动画来解锁渐变。但是，出于某种原因，背景位置仅在我使用静态像素数时才起作用，而在我使用百分比时则不起作用。理想情况下，我可以将此类应用于任何元素，并使动画工作，而无需为特定宽度编码。有人能指出我正确的方向吗？

的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;
  }
}

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/

背景位置不适用于CSS动画和线性渐变

1 个答案: