无效原因:
我们使用CSS3的gradient渐变属性是被当成背景图片(background-img)来看的。emmm以前我们是通过加载图片来实现渐变色的效果,现在是通过CSS3的gradient渐变属性就能来实现,也就是说让浏览器自己去绘制出渐变图片而减少一次图片的请求了。
而背景图片并不能使用transition过渡啊...那既然是图片不就能跟平时一样通过opacity透明度来实现过渡效果吗
解决方法
1:两个设置了渐变色的元素层叠后,通过过渡一个透明度的0到1的元素来实现渐变色渐入渐出
代码如下
<style>
.div1 {
margin: 100px auto 0;
width: 200px;
height: 200px;
background-color: #6633ff;
}
.div2 {
width: 200px;
height: 200px;
background: linear-gradient(to bottom, #f2f2f2,#fdfdfd);
opacity: 0;
transition: opacity linear .33s;
}
.div1:hover .div2{
opacity: 1;
}
</style>
<body>
<div class="div1">
<div class="div2"></div>
</div>
</body>
复制代码去试试吧。
2:设置了渐变色的元素后的background-color是默认的初始值,所以可以通过这个来过渡来实现平滑的渐出效果
<style>
body {
background-color: #ccccff;
}
.div1 {
margin: 100px auto 0;
width: 100px;
height: 100px;
background-color: #fbfbfb;
transition: background ease-in-out .33s;
}
.div1:hover {
background: linear-gradient(to bottom, #f0f0f0,#fdfdfd);
background-color: #f0f0f0;
}
</style>
<body>
<div class="div1"></div>
</body>
原理是当鼠标移到div1时,背景图片的被设置成渐变色,背景颜色为#f2f2f2(背景图片在背景颜色上),当两样发生变化时transition过渡开始生效,在0.33s内背景颜色从#fbfbfb过渡到#f2f2f2,但因为有渐变图的覆盖,所以没有渐入效果,但鼠标移出时,背景图片失效,背景颜色从#f2f2f2过渡到#fbfbfb(ease-in-out是相对于linear的匀速,慢速过渡),达到淡出效果
注意背景图和背景颜色的书写顺序不能改变,不然background的复合写法会覆盖上面的background-color,当鼠标移出时,就会从初始值(rgba(0,0,0,0))颜色到本身的#fbfbfb过渡
-----------------------------------------------------我是分割线------------------------------------------------------