Question

我准备了两种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%);
}

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

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

以下是demo

为什么会发生这种情况？如何使渐变背景颜色切换也具有过渡效果？

Answer 1

CSS Transitions规范说the color of a background can animate但渐变被归类为image。

如果你想获得渐变过渡效果，你必须伪造它，例如，将两个元素放在彼此的顶部，并将顶部的一个元素的不透明度设置为0到1或1到0。 / p>

CSS3：当背景颜色为渐变时，过渡不起作用

1 个答案: