1

所以我今天一直在为我正在开发的应用程序制作一个简单的启动页面

我想使用一些 css 动画来放置移动背景（视差），如下所示
http://css-tricks.com/parallax-background-css3/

我通过 webkit animate 函数在关键帧配置中使用了背景位置移动

这是一个样本

#BigWrapper{
    -webkit-animation-name: MOVE;
        transform: translate3d(0, 0, 0);
        -webkit-transform: translate3d(0, 0, 0);
        -webkit-animation-duration: 250s;
        -webkit-animation-timing-function: linear;
        -webkit-animation-iteration-count: infinite;
    }
     @-webkit-keyframes MOVE {
     from {

     background-position: 5% 5%;

    }
    to {
        background-position: 1300% 600%;
    }
    }

这产生了相当差的性能。背景图像是一个 png32，透明度压缩为 896kb。我尝试使用空白 translate3d 语句启动硬件加速，但没有发生明显的变化。

我还尝试将 background-position 更改为 translate3d ，它移动​​了整个 div 以及它包含的内容。我不确定如何在不影响性能的情况下产生这种效果。

这是测试站点www.auroragm.sourceforge.net

4

3 回答 3

2

虽然在 Windows XP 中使用 Chrome 和 Firefox 进行测试可以获得良好的性能，但您的 Tile.png 和 BlurBG.png 似乎都有相当大的大小。至于我，我会将 Tile.png 和 BlurBG.png 合并到一个文件中，因为 Tile.png 看起来不像是移动的 BlurBG.png 背后的静态背景。

但是，如果您想将其保存为单独的两个文件，则可能需要进一步减小文件大小。我个人选择的工具是PNGoo。

于 2012-04-15T09:34:05.573 回答
1

在我看来，那个网站运行得非常好，在 Linux 上使用 Firefox 或 Chrome。

你在哪个浏览器上测试？也许 IE 对大型背景图像的动画效果不佳。

考虑将背景动画限制在某些浏览器上。

此外，考虑使背景图像稍微变暗 - 背景中移动的对比色淹没了中心部分。

于 2012-04-15T07:31:21.350 回答
1

结果我所要做的就是告诉浏览器在每次有更新时停止缓存，这显然有很大帮助：

<META HTTP-EQUIV="Pragma" CONTENT="no-cache">

成功了:)

于 2012-05-28T16:17:28.050 回答