0

这是我的 CSS：

#pays li{
list-style:none;
margin-left:44px;
display:block;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
background:url('http://symbolset.com/images/paypal-logo.png') no-repeat;
transition:0.2s;
-moz-transition:0.2s;
-webkit-transition:0.2s;
-o-transition:0.2s;
background-size:300px 180px;
}
#pays li:hover{background:url('http://data-informed.com/wp-content/uploads/2012/10/PayPal_logo.svg-crop-300x180.png') no-repeat}
#paypal{width:300px;height:180px}​

这是jsfiddle 中的完整代码。它在 Chrome 中完美运行，所有其他浏览器都无法运行。

4

2 回答 2

0

background-size在“CSS 背景和边框模块 Level 3”的早期草稿中是不可动画的。我猜它还没有跨浏览器实现。但实际上它应该在草案中是可动画的（“Animatable：是的，除了关键字值”）。

永远记住，背景和过渡模块都还没有完成。“CSS 背景和边框 3 级”处于“候选推荐”状态，“CSS 过渡”只是一个“工作草案”。因此，您正在使用可能会受到进一步变化的不稳定技术。不要相信 Chromium 已经实现的东西，它可能会改变。

CSS 中的动画属性列表：http: //oli.jp/2010/css-animatable-properties/

CSS 开发状态概览：http ://www.w3.org/Style/CSS/current-work

于 2012-12-10T16:52:40.410 回答
0

由于背景图像更改的转换非常受 atm 支持，因此您有 2 个选项：

  1. 使用图像精灵并为背景位置设置动画
  2. 嵌入另一个元素（不幸的是你不能使用伪元素，它们上的动画也很差支持，atm）和动画不透明度
于 2012-12-10T17:24:12.170 回答