微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

动画文本不透明度时,背景颜色发生变化/闪烁

如何解决动画文本不透明度时,背景颜色发生变化/闪烁

来自这种互动生物的

你好人类,我们称之为互联网。

感谢您阅读并希望能帮助我。


enter image description here


问题::我目前正在一家网站上工作,注意到我在对自定义光标的不透明度进行动画处理时,仅在Google chrome中发现了细微但奇怪的背景色偏移。请以小gif格式查看自己,但请注意,它确实很微妙,您可能需要放大才能看到它。 2.2mb的高分辨率视频here

背景: 光标基本上只是一个自定义字体,它在scroll上淡出,然后在mousemove上淡出。动画进行时(淡入和淡出),您可以在背景上看到颜色偏移。动画是通过javascript添加删除.hidden类来完成的,因此整个动画仅来自CSS。在所有其他浏览器中都可以正常工作。如果我禁用动画,一切都会按预期顺利进行。没有颜色偏移。

.pointer-inlay {

    -webkit-transition: opacity 1.2s cubic-bezier(.215,.61,.355,1);
    transition: opacity 1.2s cubic-bezier(.215,1);
}

.pointer-inlay.hidden {

    opacity: 0;
}

谁可以提供帮助?您知道为什么会这样吗?非常感谢您的支持

jaro

?✨

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。