Question

网站加载后我收到了不需要的白色补丁/闪烁。只有在向网站添加css3动画后才会出现此问题。

这是遇到问题的the page

这是Windows计算机上镀铬的主要经验。

以下是动画的触发方式。

的Javascript

$(window).load(function () {
    $("#illustrations").css("display", "block");
    $("#illustrations").addClass('anim');
});

$(document).ready(function () {

    $("#illustrations").css("display", "none");

    $("a.transition").click(function (event) {
        event.preventDefault();
        linkLocation = this.href;
        $("#illustrations").removeClass('anim');
        $("#illustrations").addClass('reverseAnim');

        //window.location = linkLocation;
        redirectInverval();
    });

    function redirectPage() {
        $("#illustrations").css("display", "none");
        window.location = linkLocation;
    }

    function redirectInverval() {
        setInterval(redirectPage, 1000);
    }
});

CSS

.anim {
    -webkit-animation:myfirst 1s;
    /* Safari and Chrome */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    /*-webkit-backface-visibility: hidden;*/
}
@keyframes myfirst {
    0% {
        top:-600px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:0px;
    }
}
@-webkit-keyframes myfirst
/* Safari and Chrome */
 {
    0% {
        top:-600px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:0px;
    }
}
.reverseAnim {
    -webkit-animation:myfirstRev 1s;
    /* Safari and Chrome */
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
    -webkit-backface-visibility: hidden;
}
@keyframes myfirstRev {
    0% {
        top:0px;
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    50% {
        transform:rotate(30deg);
        -webkit-transform: rotate(30deg);
    }
    100% {
        top:-600px;
    }
}
@-webkit-keyframes myfirstRev
/* Safari and Chrome */
 {
    0% {
        top:0px;
        /*-webkit-transform: rotate(30deg);*/
    }
    50% {
        top: 50px;
        transform:rotate(10deg);
        -webkit-transform: rotate(10deg);
    }
    100% {
        top:-600px;
    }
}

请帮助我。

Answer 1

尝试使用此css：

html, body{ height: 100%; }

它完全解决了你的问题。我刚刚使用Tampermonkey测试了它，所以样式应用于页面加载而不是使用Developer工具应用它。

另一方面，背景图片很大（463KB）。通过简单地以80 jpeg质量而不是99质量输出它，您可以将尺寸减小到99KB，而不会有明显的质量损失。您还可以看到是否可以使用较小的背景并重复背景来实现相同的效果，这里有一个选项：http://halgatewood.com/wp-content/uploads/2011/10/linen_bg_tile.jpg

加载时不需要的白色补丁

1 个答案: