Question

我正在使用下面的CSS来做一个渐变滚动动画，它在IE11中很好地分开了。（而我猜测所有其他版本的IE）

它在Chrome和Firefox中运行良好，尚未经过测试，但我只是想知道是否有人知道这是否可以修复IE11？

似乎是裁剪不起作用。如何修改代码以与IE以及所有其他浏览器兼容？

    .elementor-icon .fa:before {
          background: linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
  background-size: 400% 400%;
  animation: BackgroundGradient 10s ease infinite;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

@keyframes BackgroundGradient {
                0% {background-position: 0% 50%!important;}
                50% {background-position: 100% 50%!important;}
                100% {background-position: 0% 50%!important;}
}

Answer 1

您可以使用这个小后备＆＃34; hack＆＃34;，将-webkit-添加到线性渐变（Opera也有一行，但我没有尝试过）：

.elementor-icon .fa:before {
    background: -webkit-linear-gradient(132deg, #e31372, #12a9c1, #5086bb, #6a10b4, #d49c10);
    background: -o-linear-gradient(transparent, transparent);
    background-size: 400% 400%;
    animation: BackgroundGradient 10s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

@keyframes BackgroundGradient {
    0% {background-position: 0% 50%!important;}
    50% {background-position: 100% 50%!important;}
    100% {background-position: 0% 50%!important;}
}

由于IE不支持webkit前缀，但Edge确实如此，它看起来还不错。

受本文启发：http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

IE11 CSS动画问题

1 个答案: