我有以下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或移动设备中不显示。
帮助?我已经花了一个小时的时间来处理这个问题,但还是想不出这个错误。谢谢您抽时间见我。
发布于 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中测试)
我还通过将蒙版移到外面来优化您的动画,以获得更平滑的效果。
https://stackoverflow.com/questions/69898541
复制相似问题