0

我准备了两种风格的body,它们的背景都是渐变的,我也给标签添加了过渡效果:

body{
    background: -webkit-gradient(radial, 50% 50%, 0, 50% 50%, 500, from(rgb(240, 240, 240)), to(rgb(190, 190, 190)));
    -webkit-transition: all 1s linear 0s;
}

body.orange{
    background: -webkit-radial-gradient(50% 50%, circle cover, rgba(0, 0, 0, 0.7), rgba(35, 35, 35, 1) 60%);
}

我使用按钮在两种样式之间切换。问题是样式切换没有过渡效果。

但是当我将背景颜色设置为纯色时,如“红色”或“黑色”,过渡效果再次显示。

这是演示

为什么会这样?如何使渐变背景颜色切换也具有过渡效果?

4

1 回答 1

2

CSS 过渡规范说背景的颜色可以动画,但渐变被归类为图像

如果您想获得渐变过渡效果,您将不得不伪造它,例如,将两个元素放在一起,并将顶部元素的不透明度设置为 0 到 1 或 1 到 0 的动画。

于 2012-08-03T02:51:47.490 回答