Question

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

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

在我的大学游戏项目中添加滚动星形字段。

http://asteroids.chrisloughnane.net/

当然我的讲师正在使用Firefox，所以他回到我身边说它不起作用。

它运作良好铬苹果浏览器 IE9

我想要一些条件CSS

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

或

湾在Firefox中实现滚动字段

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

TIA

导致问题的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;

Answer 1

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

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

希望这会奏效。

用于在Firefox上滚动背景的条件CSS

1 个答案: