问题描述
我正在开发一个新的个人网站。对于主页标题，我使用新主题的颜色制作了舒缓的波浪动画。
问题：此动画似乎很重，并且在中端智能手机和廉价笔记本电脑等低端设备上出现锯齿状/断断续续的现象。对于主页或任何网站而言，这不是理想的效果。
动画是通过波浪元素上的动画背景位置和带有 css 变换动画（平移、旋转）的微妙运动完成的。
到目前为止我尝试过的：
- 将动画转换为轻量级视频。问题：颜色 跨浏览器复制是一团糟。底部的绿色和 顶部的蓝色需要与页面背景相匹配， 这是不可能在所有主要浏览器中完成的（我尝试使用 css 过滤器来纠正颜色解释的差异，但 不幸的是，这也不能令人满意）。
- 在动画元素上使用 will-change css 属性。这不会产生明显的差异，但我仍然保留它们以确保确定。
- 使用 javascript 动画库来完成繁重的动画提升，但这会产生同样繁重的结果。
- 将视频渲染到 html5 画布。这仍然会产生相同的颜色误解。
- 思考生活以及为什么 2020 年的世界仍然如此，浏览器和设备之间的色彩再现没有规定。这显然没有产生有用的结果。
结论： 我愿意接受任何关于使动画减少资源密集型的意见，我更愿意像现在一样保留实时渲染版本，但如果有解决 html5 中颜色解释问题的解决方案，我很乐意切换到使用这种方法，因为它往往最容易获得最终用户资源。
解决方法
暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！
如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。
小编邮箱:dio#foxmail.com (将#修改为@）