css3 线性渐变和css3过渡一起用没效果了？还是我语法错误，请大神回答
发布网友
发布时间：2022-04-06 10:45
共1个回答
热心网友
时间：2022-04-06 12:14
css3目前还不完善，transition目前不支持渐变的背景属性（它被看作是图片了，图片是不能transition的，这个知道吧），so U can't transition gradients for now.
但是呢，你可以做一个掩眼法，前端嘛，css给了你无限发挥的空间。
css：
<style>body{
margin: 0;
padding: 0;
}
.gavin_design div{
width: 200px;
height: 200px;
margin: 20px auto;
}
.no{
background: #ccc;
-webkit-transition: all 2s linear;
}
.no:hover{
background: #f60;
}
.line{
position: relative;
background: -webkit-linear-gradient(top,#f60,#47CC38);
}
.line_gavinfix{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
background: -webkit-linear-gradient(top,#47CC38,#f60);
-webkit-transition: opacity 2s linear;
}
.line:hover .line_gavinfix{
opacity: 1;
}
</style>
html：
<div class="gavin_design"><div class="no"></div>
<div class="line"><span class="line_gavinfix"></span></div>
</div>
预览一下，怎么样？是你需要的么^.^
