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