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

前端之家收集整理的这篇文章主要介绍了javascript – 浏览器抗锯齿(流畅的线条)前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

参见英文答案 > 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元素.
结果如下:

原文链接:https://www.f2er.com/html/426125.html

猜你在找的HTML相关文章