首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >CSS keyframe shimmer效果可以在Chrome中使用,但不能在Firefox中使用?

CSS keyframe shimmer效果可以在Chrome中使用,但不能在Firefox中使用?
EN

Stack Overflow用户
提问于 2021-11-09 12:55:36
回答 1查看 37关注 0票数 0

我有以下HTML:

代码语言:javascript
运行
复制
<div class="shimmer">
  <a href="somePage" target="_blank"><img src="someImage"></a>
  <a href="otherPage" target="_blank"><img src="otherImage"></a>
</div>

CSS:

代码语言:javascript
运行
复制
.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或移动设备中不显示。

帮助?我已经花了一个小时的时间来处理这个问题,但还是想不出这个错误。谢谢您抽时间见我。

EN

回答 1

Stack Overflow用户

发布于 2021-11-09 15:40:39

这是因为-webkit不能在火狐中工作。但是火狐支持mask属性。

例如:您可以声明所有回退属性。

代码语言:javascript
运行
复制
div {
  -webkit-mask: bla;
  mask: bla;
}

另请参阅有关遮罩功能的文档。在页面的底部,您可以看到支持的浏览器。

https://developer.mozilla.org/en-US/docs/Web/CSS/mask

代码语言:javascript
运行
复制
.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%;
  }
}
代码语言:javascript
运行
复制
<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中测试)

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

票数 1
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69898541

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档