【问题标题】:background-blend-mode not working on Safari CSS背景混合模式不适用于 Safari CSS
【发布时间】:2021-01-30 22:19:57
【问题描述】:

我正在开发一种产品。我做了一道闪电。这个动画在 chrome 上效果很好。但是 Safari 上没有动画。这个问题是由 background-blend-mode 还是其他原因引起的?

代码:

.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;
  }
}

【问题讨论】:

  • 您能否将其创建为 sn-p 并上传您的图片?

标签: css safari webkit css-animations background-blend-mode


【解决方案1】:

这可能是因为您的 Safari 版本。 safari 支持background-blend-mode 从版本 10.1 开始,您可以在 caniuse.com 找到它。另一个问题可能是background-blend-mode 的动画,根据 W3 学校的说法,background-blend-mode 是不可动画的。您可以在此 link 中找到它,但我对此并不完全确定(背景混合模式不可动画)。这是因为我尝试过它并且它有效。所以问题可能出在 Safari 版本上。

【讨论】:

    猜你喜欢
    • 2021-07-25
    • 1970-01-01
    • 1970-01-01
    • 2021-11-22
    • 2017-04-29
    • 1970-01-01
    • 1970-01-01
    • 2020-07-13
    • 2021-04-19
    相关资源
    最近更新 更多