CSS3 线性渐变背景的过渡效果

对于background-color，可以直接transition: background-color 2s就能实现过渡效果，但对于background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);就无能为力了。对于这种复杂的背景，只能给opacity添加过渡效果了，当做背景图片处理。

首先，设置过渡的几种状态：

   <div class='box'><!--状态1--><div class='state state1'></div><!--状态2--><div class='state state2'></div></div>

然后对这几种状态的透明度设置过渡效果：

.state{transition:opacity 2s;
}.state1{background:-webkit-radial-gradient(circle,#ffc71d 0,rgba(168,117,14,.5) 130%);opacity:1
}.state2{background:-webkit-radial-gradient(circle,#585858 0,#ccc 130%);;opacity:0
}

切换状态时，就切换这几个状态的透明度，即可：

box.on('click',function(){if(state1.css('opacity') == 1){state2.css('opacity',1)state1.css('opacity',0)}else{state1.css('opacity',1)state2.css('opacity',0)}
})

效果可看：demo，点击矩形就可以看到过渡效果了。

CSS3 线性渐变背景的过渡效果相关推荐

html给文字添加波浪线,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
波浪形状html,使用CSS3线性渐变（linear-gradient）实现文本波浪线效果_html/css_WEB-ITnose...
我们在读纸质书的时候,经常用笔划波浪线来突出重点内容,以强化视觉感受. 而在Web页面上,没有CSS3之前,我们只能用背景图片来实现类似功能,这当然不是个高效的方式,且难于维护和调整. 比如你只是想调 ...
利用Phtoshop去掉图片中的线性渐变背景
去掉线性渐变背景的思路就是采用颜色叠加. 我们知道在计算机中颜色都是采用RGB表示的,如果一个色素的RGB颜色是(a1,a2,a3),那么在该像素上混合一个(255-a1,255-a2,255-a3) ...
CSS3 线性渐变循环动画
CSS3 线性渐变循环动画最近开发,遇到一个首屏加载优化的情况,需要如下图的线性渐变动画: 网页动态效果 (http://htmlpreview.github.io/?https://github. ...
html渐变线条代码,css3线性渐变语法的详解（代码示例）
本篇文章给大家带来的内容是css3线性渐变语法的详解(代码示例).有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 线性渐变的完整语法:.demo { background: line ...
CSS3: 线性渐变用法详解
前言演示下太老版本浏览器的渐变实现了[IE9-]; IE9以前,渐变都是通过滤镜实现的,大体的写法就是这样; .testDiv {width:400px;height:400px;border:1p ...
CSS3 线性渐变（linear-gradient）
在CSS3出现之前,渐变效果只能通过图形软件(比如Photoshop)设计图片来实现,可拓展性差,还影响性能,而且还必须要会PS.如今通过CSS3可以很轻松的完成渐变效果. 一.线性渐变的基础知识介绍 ...
CSS3线性渐变与径向渐变
目标:使用background-image属性实现渐变背景效果 CSS 定义了两种渐变类型: 线性渐变(向下/向上/向左/向右/对角线) 径向渐变(由其中心定义) 1.CSS 线性渐变如需创建线性渐 ...
【CSS3】渐变背景
文章目录一.线性渐变 1. 渐变方向 2. 节点分布 3. 重复线性渐变二.径向渐变 1. 可选属性值[shape size at position] 2. 节点分布 3. 重复径向渐变一.线性 ...

CSS3 线性渐变背景的过渡效果

CSS3 线性渐变背景的过渡效果相关推荐

最新文章

热门文章