Html CSS-无限动画（向右加载渐变）闪烁

我在这里学习了本教程：

创建虚拟加载程序。不幸的是，本教程包含固定像素值，我希望它能在所有尺寸的屏幕上工作。所以我调整了动画如下：

@关键帧占位符闪烁{
0% {
背景位置：-30vw 0
}
100% {
背景位置：30vw 0
}
}
.c-动画背景{
动画持续时间：1.5s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
背景：fff；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
身高：100%；
宽度：100%；
位置：相对位置；
填充顶部：50px；
-webkit背面可见性：隐藏
}

---

试试这段代码

我所做的是将关键帧值转换为成对，因为只有2个阈值，不需要使用%值

其次，我使用视口单位根据视口给出了宽度和高度值

如果有任何问题，请在下面发表评论

@关键帧占位符闪烁{
从{
背景位置：-468px 0
}
到{
背景位置：468px 0
}
}
.动画背景{
动画持续时间：1s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
背景：#f6f7f8；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
背景尺寸：800px 104px；
宽度：100vw；
高度：100vh；
位置：相对位置；
}

---

请查看更新的答案，希望对您有所帮助。目前我认为没有必要移动身体。但你们可以在它里面定义一个划分，使它成为绝对的，相对于身体的

当定义为负值时，VW无法正常工作。请检查更新的答案

@关键帧占位符闪烁{
0% {
背景位置：0px 0；
}
100% {
背景位置：100em0；
}
}
.c-动画背景{
动画持续时间：3s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
背景：fff；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
身高：100%；
宽度：100%；
位置：绝对位置；
填充顶部：50px；
-webkit背面可见性：隐藏；
左：0；
右：0；
排名：0；
底部：0；
}

---

1.5秒后，动画将从0开始。这就是它闪烁的原因

这在JSFIDLE中起作用：

0% {
  background-position: -30vw 0
}
100% {
  background-position: 70vw 0
}

看清楚一点。这取决于屏幕的宽度

祝你好运

---

Fabian#网络明星

没有关于持续时间的问题。在这里，你从-30vh开始，以70vh（100-30）结束，就像平滑过渡一样简单。检查下面的代码段以供参考

@关键帧占位符闪烁{
0% {
背景位置：-30vw 0
}
100% {
背景位置：70vw 0
}
}
.c-动画背景{
动画持续时间：1.5s；
动画填充模式：正向；
动画迭代次数：无限；
动画名称：闪烁；
动画计时功能：线性；
背景：fff；
背景：线性梯度（向右，#eeeeee 8%，#dddddd 18%，#eeeeee 33%）；
身高：100%；
宽度：100%；
位置：相对位置；
填充顶部：50px；
-webkit背面可见性：隐藏
}

测试此项：

@keyframes placeHolderShimmer{
    0% {
        background-position: -50vw 0
    }

    100% {
        background-position: 50vw 0
    }
}

---

理想情况下，您可以使用

100vw

和

-100vw

。将速度提高到

5s

，速度与您现在的速度相同。谢谢你@misterManSam，你的答案很好用，但很简单。完美的这可以跳过也不会调整大小。这可以跳过也不会调整大小。