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

n9vozmp4 于 2023-05-23 发布在其他

关注(0)|答案(2)|浏览(151)

我试图使用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;
  }
}

css

来源：https://stackoverflow.com/questions/36612631/background-position-not-working-with-css-animation-and-linear-gradient

2条答案

按热度按时间

3zwjbxry1#

添加您的代码

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/

赞(0）回复(0）举报 2023-05-23

k10s72fa2#

MDN上的文章很好地解释了这一点
tldr：要使用百分比background-position，背景的大小不应等于要定位的尺寸的100%。N%位置意味着背景的N%被Map到元素的N%。由于渐变自动具有100%x100%的大小，因此设置background-position似乎没有效果，除非您将background-size设置为某个值，例如200%

赞(0）回复(0）举报 2023-05-23

我来回答

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

2条答案

相关问题

热门标签

最新问答