CSS keyframe shimmer效果可以在Chrome中使用，但不能在Firefox中使用？
CSS keyframe shimmer效果可以在Chrome中使用，但不能在Firefox中使用？
提问于 2021-11-09 12:55:36
我有以下HTML：
<div class="shimmer">
<a href="somePage" target="_blank"><img src="someImage"></a>
<a href="otherPage" target="_blank"><img src="otherImage"></a>
</div>CSS：
.shimmer img{
color: grey;
display:inline-block;
-webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
@keyframes shimmer {
100% {-webkit-mask-position:left}
}图像上的一个简单的微光效果。
当我在本地用Firefox或Chrome打开HTML存档时，它工作得很好。然而，当我修改互联网网页时，效果在Chrome中运行良好，但在Firefox或移动设备中不显示。
帮助?我已经花了一个小时的时间来处理这个问题，但还是想不出这个错误。谢谢您抽时间见我。
回答 1
Stack Overflow用户
发布于 2021-11-09 15:40:39
这是因为-webkit不能在火狐中工作。但是火狐支持mask属性。
例如:您可以声明所有回退属性。
div {
-webkit-mask: bla;
mask: bla;
}另请参阅有关遮罩功能的文档。在页面的底部，您可以看到支持的浏览器。
https://developer.mozilla.org/en-US/docs/Web/CSS/mask
.shimmer img {
color: grey;
display: inline-block;
-webkit-mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
mask: linear-gradient(-60deg, #000 30%, #0005, #000 50%) right / 300% 100%;
background-repeat: no-repeat;
animation: shimmer 3s infinite;
}
@keyframes shimmer {
0% {
-webkit-mask-position: 140% 140%;
mask-position: 140% 140%;
}
100% {
-webkit-mask-position: -20% -20%;
mask-position: -20% -20%;
}
}<div class="shimmer">
<a href="somePage" target="_blank"><img src="https://i.stack.imgur.com/Sbpt3.jpg"></a>
<a href="otherPage" target="_blank"><img src="https://i.stack.imgur.com/Sbpt3.jpg"></a>
</div>
(在Chrome 95和Firefox 94中测试)
我还通过将蒙版移到外面来优化您的动画，以获得更平滑的效果。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/69898541
复制相关文章
相似问题
腾讯云开发者
