时间戳

首页 > 解决方案 > CSS 关键帧闪光效果在 Chrome 中有效，但在 Firefox 中无效？

html - CSS 关键帧闪光效果在 Chrome 中有效，但在 Firefox 中无效？

问题描述

我有以下 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 或移动设备中没有出现。

帮助？我已经搞砸了一个小时，无法提出错误。感谢您的时间。

标签： htmlcsseffectshimmer

解决方案

这是因为-webkit在 Firefox 中不起作用。但 Firefox 支持该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 中测试）

我还通过将蒙版移到外面来优化你的动画以获得更平滑的效果。

推荐阅读