css3 线性渐变和css3过渡一起用 过度时间不生效?换个方法做

gavinmaster123推荐于2018-03-14 · TA获得超过627个赞::

 

css3目前还不完善,transition目前不支持渐变的背景属性(它被看作是图片了,图片是不能transition的,这个知道吧),so U can‘t transition gradients for now.

但是呢,你可以做一个掩眼法,前端嘛,css给了你无限发挥的空间。

 css3 线性渐变和css3过渡一起用 过度时间不生效?换个方法做

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>

 

 

 

 

摘自百度知道https://zhidao.baidu.com/question/617644842249368052.html?qq-pf-to=pcqq.c2c

css3 线性渐变和css3过渡一起用 过度时间不生效?换个方法做

上一篇:新装的linux 查询全部用户和修改用户密码


下一篇:【无标题】