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

Question

在我的滑块中,我遇到了问题,在我的淡化效果结束后,我旋转的容器的一部分看起来像一个步骤.我可以在这里举个例子:

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

<div class="w-slider slider" data-infinite="1" data-autoplay="1" data-delay="4000" data-duration="5000" data-animation="fade">
    <div class="w-slider-mask mask">
        <div class="w-slide">
            <div class="slide-zusatz1">
                <div class="w-container slidertext">
                    <p>Here is some text</p>
                </div>
            </div>
            <img src="myimg.png">
         </div>
    </div>
</div>

谢谢

Answer 1

您可以打开硬件加速渲染。要在浏览器中触发它，您需要使用任何使用它的 css 属性。

例如，我添加transform: translateZ(0)到您的旋转 div 元素。结果如下：