javascript – 浏览器抗锯齿(流畅的线条)

发布时间：2020-12-14 22:55:58 所属栏目：资源来源：网络整理

导读：参见英文答案 css transform,jagged edges in chrome????????????????????????????????????11个在我的滑块中,我遇到了问题,在我的淡化效果结束后,我旋转的容器的一部分看起来像一个步骤.我可以在这里举个例子： http://lamit.webflow.com 正如您在滑块中看

参见英文答案 > css transform,jagged edges in chrome????????????????????????????????????11个
在我的滑块中,我遇到了问题,在我的淡化效果结束后,我旋转的容器的一部分看起来像一个步骤.我可以在这里举个例子：

http://lamit.webflow.com

正如您在滑块中看到的那样,在效果期间,文本栏的底部是平滑的.然而,在过渡之后,它看起来很奇怪.

关于如何摆脱它的任何想法？

更新

由于此站点是在webflow中完成的,因此在分析代码时会出现一些css错误(由于webflow的一些预防).

相关代码如下：

CSS

.mask {
    left: -2%;
    top: -50px;
    display: block;
    width: 105%;
    margin-right: auto;
    margin-left: auto;
   -webkit-transform: rotate(-3deg);
   -ms-transform: rotate(-3deg);
   transform: rotate(-3deg);
}

HTML


谢谢


最佳答案
您可以打开硬件加速渲染.
要在浏览器中触发它,您需要使用任何使用它的css属性.
例如,我将transform：translateZ(0)添加到您的旋转div元素.
结果如下：
                        （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!