0

次のcss3ルールがあります

#sun, #sun div { 
    position:absolute;
    border-radius:1000px;
    -webkit-border-radius:1000px;
    -moz-border-radius:1000px;
    -ms-border-radius:1000px;
    -o-border-radius:1000px;
    animation:sunrise 3.2s ease 0 infinite alternate;
    -webkit-animation:sunrise 3.2s ease 0 infinite alternate;
    -moz-animation:sunrise 3.2s ease 0 infinite alternate;
    -ms-animation:sunrise 3.2s ease 0 infinite alternate;
    -o-animation:sunrise 3.2s ease 0 infinite alternate;
}

@-moz-keyframes sunrise {
   0%  {background:rgba(255,255,204,.23);}
  75% { background:rgba(255,255,204,0.5); } 
  100% { background:''; }
}

ただし、Firefox の実装は機能していないようです。背景色はすべて rgba 形式で設定されていますが、各#sundiv の色は異なります。

何が問題なのですか？

4

1 に答える 1

3

あなたが投稿したコードは非常に不完全ですが、うまくいかないことがかなりあります。

  • 接頭辞なしのバージョンは常に最後に記述し、接頭辞付きのものの前に記述しないでください。
  • -ms-border-radius-o-border-radius 存在しませんでした！また、FF3.6 をサポートする必要がない限り、役に立ちません-moz-border-radius。-webkit-border-radius最近もほとんど役に立たない - http://caniuse.com/#feat=border-radiusを参照
  • Firefox 16 以降 (現在のバージョンは 19) は、接頭辞なしのキーフレーム アニメーションをサポートしています! http://caniuse.com/css-animationを参照
  • 0sではありません0！さらに、遅延のデフォルト値はたまたま である0sため、それを省略して書き込むことができます (タイミング関数の初期値である をanimation: sunrise 3.2s infinite alternate;省略できるのと同じ方法です)。ease
  • background: rgba(255,255,204,0)ではありませんbackground: ''！

そして質問: なぜこのような巨大な を使用するのborder-radiusですか? 私のラップトップの画面は、このような巨大なborder-radius. ディスクを作成するだけの場合は、要素に equalwidthとheightset を指定しborder-radius: 50%ます。

于 2013-03-22T16:01:35.110 に答える