我有以下 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 或移动设备中没有出现。
帮助?我已经搞砸了一个小时,无法提出错误。感谢您的时间。