0

注: これは宿題ではありません。私の課題を表示するためのサイトです。

私はこの素晴らしいヒントを使用しています: http://css-tricks.com/3d-parralax-background-effect/

私の大学のゲーム プロジェクトにスクロール スター フィールドを追加します。

http://asteroids.chrisloughnane.net/

当然、私の講師はFirefoxを使用していたので、動作していないと言って戻ってきました。

Chrome Safari IE9では問題なく動作します

いずれかの条件付きCSSを使用したいと思います

a. 好きな背景を Firefox に置くだけ

また

b. 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 に答える