0

http://dev.viral-minds.com/miller/abc/abc.html

これについての2つの質問

  1. ページが読み込まれたときに、最初に緑色のブロックが「点滅」しないようにするにはどうすればよいですか。
  2. アニメーションは現時点ではChromeでのみ機能します...FFとIEで機能させるにはどうすればよいですか？

ありがとう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>main</title>

    <style type="text/css">
        body 
        {
            background-color:#FFFFF0; /*ivory*/
            overflow: hidden;
        }

        #box
        {
            position: absolute;
            width:495px;
            height:263px;
            background:#32331d;
            top: 20px;
            left: 20px;
        }

        #nav
        {
            position: absolute;
            margin-left:30px;
            width:100%;
            height:100px;
            top: 425px;
            z-index: 100;
            background-image:url('colors.png');
            background-repeat:no-repeat;
        }


        #stars,
        #stars-2,
        #small-stars,
        #small-stars-2 {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 800px;
            height: 800px;
            margin: -300px 0 0 -300px;
            background: url(stars-large.png) no-repeat center center;
            -webkit-animation-name: starsLarge;
            -webkit-animation-duration: 240s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLarge {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #stars-2 {
            -webkit-animation-name: starsLargeAlt;
            -webkit-animation-duration: 180s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
        }

        @-webkit-keyframes starsLargeAlt {
            from {
                -webkit-transform: rotate(180deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }

        #small-stars,
        #small-stars-2 {
            background: url(stars-small.png) no-repeat center center;
            -webkit-animation-duration: 60s;
            -webkit-animation-name: starsSmall;
        }

        #small-stars-2 {
            -webkit-animation-name: starsSmallAlt;
            -webkit-animation-duration: 120s;
        }

        @-webkit-keyframes starsSmall {
            from {
                -webkit-transform: rotate(360deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(0deg) scale(.5);
                opacity: .5;
            }
        }

        @-webkit-keyframes starsSmallAlt {
            from {
                -webkit-transform: rotate(0deg) scale(3);
                opacity: .9;
            }
            to {
                -webkit-transform: rotate(360deg) scale(.5);
                opacity: .5;
            }
        }
    </style>
</head>
<body>
    <div id="box"><img src="actual.png"></img></div>
    <div id="nav"></div>
    <div id="stars"></div>
    <div id="stars-2"></div>
    <div id="small-stars"></div>
    <div id="small-stars-2"></div>
</body>

4

2 に答える 2

3

項目1：オーバーレイされた画像がまだサーバーから取得されていないため、緑色のブロックが点滅します。display: none;のCSSに追加し#box、ページが完全に読み込まれた後にプログラムで表示することができます。例えば：

// jQuery:
$(document).ready(function(){
  $('#box').show();
});

-webkit項目2：特定のスタイル定義を使用しているため、アニメーションはChromeでのみ機能します。これらのブラウザで機能するかどうかを確認するには-moz、などの代替手段を調査する必要があります。-msプレフィックスを完全に省略してみることもできます。

于 2012-06-05T15:08:06.363 に答える
1

I.そのdivの背景色を、ページの背景に一致するように変更できます。その後、画像が読み込まれたら、jQueryを使用して画像を濃い緑色に変更します。

$(function() {
    $('#box img').load(function() {
        $(this).parent().css('background-color', '#32331D');
    });
});

II。以外のブラウザ固有のプレフィックスを追加する必要があり-webkitます。

  • FFの場合--moz
  • IEの場合--ms
  • Operaの場合--o

これらのアニメーションは、プレフィックスがあるにもかかわらず、古いバージョンのIE（8以下）では機能しないことに注意してください。それらの吸盤はCSSアニメーションをサポートしていません。

于 2012-06-05T15:12:48.190 に答える