我准备了两种风格的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%);
}
我使用按钮在两种样式之间切换。问题是样式切换没有过渡效果。
但是当我将背景颜色设置为纯色时,如“红色”或“黑色”,过渡效果再次显示。
这是演示
为什么会这样?如何使渐变背景颜色切换也具有过渡效果?