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. 如果你只是为了制作一张光盘，请给你的元素 equal widthandheight和 set border-radius: 50%。

于 2013-03-22T16:01:35.110 回答