您的位置：首页 > Web前端 > CSS

CSS3 transiton过渡与CSS3 渐变 无效原因及解决方法

2018-03-10 22:04 363 查看

无效原因：

    我们使用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;
  
4000
  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过渡

-----------------------------------------------------我是分割线------------------------------------------------------

CSS3 transiton过渡与CSS3 渐变 无效原因及解决方法就到这啦，如果我写的有什么问题或不清楚的地方，希望大家能在评论里指出，我会及时修改的。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航