1

网站加载后，我得到了不需要的白色补丁/闪烁。此问题仅在向站点添加 css3 动画后才开始。

这是遇到问题的页面

这主要是在 Windows 计算机上的 chrome 中体验的。

下面是动画的触发方式。

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;
    }
}

请帮我解决一下这个。

4

1 回答 1

2

尝试使用这个 css：

html, body{ height: 100%; }

它完全解决了你的问题。我刚刚使用 Tampermonkey 对其进行了测试，因此该样式应用于页面加载，而不是使用开发人员工具应用它。

附带说明，该背景图像很大（463KB）。通过简单地以 80 jpeg 质量而不是 99 导出它，您可以将大小减小到仅 99KB，而不会明显降低质量。您还可以查看是否可以使用较小的背景并重复背景来实现相同的效果，这是一个选项：http ://halgatewood.com/wp-content/uploads/2011/10/linen_bg_tile.jpg

于 2013-08-10T13:32:02.090 回答