这个问题在这里已经有了答案:
Responsive shine animation using linear-gradient as background
(1 个回答)
去年关闭。
这是一个类似 Facebook 的加载器。我不知道为什么这是闪烁的。
我试过改变大小,这会影响闪烁,但我不明白如何。
有人可以帮我弄清楚为什么吗?
div{
width:600px;
height:100px;
}
.placeholder-waves {
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: wave;
animation-name: wave;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-direction: normal;
animation-direction: normal;
background-size: 1200px 104px;
background: #f6fbfb;
background: #eeeeee;
background: linear-gradient(to right, #eeeeee 4%, #dddddd 47%, #eeeeee 87%);
}
@keyframes wave {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
@-webkit-keyframes wave {
0% {
background-position: -468px 0
}
100% {
background-position: 468px 0
}
}
<div class="placeholder-waves"></div>
最佳答案
在关键帧中,您写道:background-position: -468px 0;
是否有理由使用 468px
当你的 div 的长度是 600px 时?因为这就是跳跃的原因。由于 div,渐变为 600px 长。所以在任何地方都使用相同的长度( 600px
),它工作得很好:
div{
width:600px;
height:100px;
}
.placeholder-waves {
-webkit-animation-duration: 1.3s;
animation-duration: 1.3s;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-iteration-count: infinite;
animation-iteration-count: infinite;
-webkit-animation-name: wave;
animation-name: wave;
-webkit-animation-timing-function: linear;
animation-timing-function: linear;
-webkit-animation-delay: 0s;
animation-delay: 0s;
-webkit-animation-direction: normal;
animation-direction: normal;
background-size: 1200px 104px;
background: #f6fbfb;
background: #eeeeee;
background: linear-gradient(to right, #eeeeee 4%, #dddddd 47%, #eeeeee 87%);
}
@keyframes wave {
0% {
background-position: -600px 0
}
100% {
background-position: 600px 0
}
}
@-webkit-keyframes wave {
0% {
background-position: -600px 0
}
100% {
background-position: 600px 0
}
}
<div class="placeholder-waves"></div>
关于html - 我如何消除这个类似 Facebook 的加载器中的闪烁?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59788341/