0

注意：这不是家庭作业，它只是一个展示我的作业的网站。

我正在使用这个不错的提示： http ://css-tricks.com/3d-parralax-background-effect/

为我的大学游戏项目添加滚动星域。

http://asteroids.chrisloughnane.net/

当然，我的讲师使用的是 Firefox，所以他回复我说它不起作用。

它在 Chrome Safari IE9 中运行良好

我想要一些有条件的 CSS

一种。只需将我选择的背景放在 Firefox 上

或者

湾。在 Firefox 中实现滚动字段

我在这里和网上搜索，找不到任何东西。

蒂亚

导致问题的 CSS 是：

@-webkit-keyframes STAR-MOVE {
    from {
        left: 0;
        top: 0;
    }
    to { 
        left: -10000px;
        top: -2000px;
    }
}

#background {
    background: black url(../images/background.png) repeat 5% 5%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 100;

    -webkit-animation-name: STAR-MOVE;
    -webkit-animation-duration: 200s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#midground {
    background: url(../images/midground.png) repeat 20% 20%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 200;

    -webkit-animation-name: STAR-MOVE;
    -webkit-animation-duration: 150s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

#foreground {
    background: url(../images/foreground.png) repeat 35% 35%;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    z-index: 300;

    -webkit-animation-name: STAR-MOVE;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

解决方案：

-moz-animation-name:mymove;
-moz-animation-duration:150s;
-moz-animation-timing-function: linear;
-moz-animation-iteration-count: infinite;
4

1 回答 1

1

看起来firefox正在使用自己的前缀-moz-animation-name等。

http://www.w3schools.com/cssref/css3_pr_animation-name.asp

希望这会奏效。

于 2013-02-28T11:19:31.017 回答