0

我正在开发一种产品。我做了一道闪电。这个动画在 chrome 上效果很好。但是 Safari 上没有动画。这个问题是由背景混合模式还是其他原因引起的？

代码：

.block-2 {
    -webkit-animation-name: thund;
    -webkit-animation-duration: 2s;
    -webkit-animation-iteration-count: infinite;
    background-blend-mode: normal;
    background-image:url(thunder.png), url(red-bg.jpg);
    background-position: 99%, 100%;
    background-repeat: no-repeat;

}

@keyframes thund {
  0% {   background-blend-mode: normal;
    }
  100% {   background-blend-mode: hue;
    }
  }

@-webkit-keyframes thund {
0% {   background-blend-mode: normal;
  ;}
100% {   background-blend-mode: hue;
  }
}
4

1 回答 1

0

这可能是因为您的 Safari 版本。对background-blend-modesafari 的支持从 10.1 版本开始，您可以在 caniuse.com 中找到它。另一个问题可能是 的动画background-blend-mode，根据 W3 学校的说法，background-blend-mode它是不可动画的。你可以在这个链接中找到这个，但我对此并不完全确定（背景混合模式不是可动画的）。这是因为我试过了，它工作。所以问题可能出在 Safari 版本上。

于 2020-10-16T13:53:31.893 回答