【原】[webkit移动开发笔记]之CSS3径向渐变

  1. 云栖社区>
  2. 博客>
  3. 正文

【原】[webkit移动开发笔记]之CSS3径向渐变

白树 2016-04-29 14:48:50 浏览1264
展开阅读全文

谈到渐变,大家并不陌生,设计稿中经常会遇到,其中最常见的也最平凡使用的是线性渐变和径向渐变,在pc端开发,很多大型网站都需要考虑所有浏览器的兼容,通常如渐变的按钮或者背景图一般会被重构师们切成图片,而在移动开发中如果使用图片是很占流量,能不用图片尽量不使用,那么,CSS3来实现无图的渐变效果是首选的。

本文以移动开发中遇到的一个径向渐变例子,讲解CSS3径向渐变在项目中的应用和以及需要注意的地方。

 一、径向渐变的基础知识

径向渐变的概念:从起点到终点颜色从内到外进行圆形渐变(从中间向外拉)。

 二、径向渐变的基本语法

background-image:-webkit-gradient(type,x1 y1,r1,x2 y2,r2,from(开始颜色值),to(结束颜色值),color-stop(偏移量小数,停靠颜色值),... );

第一组参数type(类型)为 radial,因为是径向渐变

第二组参数x1 y1,r1为第一个圆的圆心和半径;

第三组参数x2 y2,r2为第二个圆的圆心和半径;

第四组参数color-stop为渐变的中间过渡色,可以设置多组。

 二、CSS3径向渐变在ios和android系统的兼容测试

android2.x特别是2.1等较低的版本,并不完全支持,渲染出来的效果不丰富

 二、CSS3径向渐变最简单的写法

CSS3径向渐变(radial)的代码


.bg{
  background:-webkit-gradient(radial,50% 50%,0,50% 50%,100,from(green),to(white));
} 

代码解释如下,可以看出径向渐变是2个圆组成,2个圆可分别设置不同的圆心和半径,这里的圆心都为(50%,50%),第一个50%是圆心距离X轴的距离,第二个50%是圆心距离Y轴的距离,

而第一个圆的半径为0,第二个圆的渐变半径为100。

 运行代码后视觉效果如下图,可以看出以白色(white)结束后,白色填充了整个背景

 

大部分设计稿是一个颜色到另一个颜色的渐变,所以我们一般可以设置第一个圆渐变是起点,半径为0,第二个圆的渐变结束点,开始设置半径,这是最简单的做法啦!然后也可能运到更多复杂的效果,这个需要你对CSS3渐变有深入的理解和使用

 三、CSS3径向渐变的中间过渡色color-stop

color-stop到底是怎么使用的呢,看下来自Photoshop渐变编辑器的图片:

为了明显的看到效果,代码中从绿色到紫色的径向渐变,50%处中间过渡色为红色,80%处为黄色


.bg{
  background:-webkit-gradient(radial,50% 50%,0, 50% 50%,100,from(green), to(purple),color-stop(50%,red),color-stop(80%,yellow));
} 

 运行代码后视觉效果如下图:

 四、CSS3径向渐变实战

设计稿给过来的背景图,2层的线性渐变叠加,要如何实现呢?

 

上图,我们来分析下,

最顶层(图层8)为黄色渐变到透明,在半径在40到180之间由70%的透明度渐变到0%,也就是渐变完全透明。

-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0)));
//rgba为aplha通道的RGB颜色,在最后一个参数设定,通道值范围为0~1.0,0表示完全透明,1表示不透明

中间一层(图层7)为橙色渐变到透明,在半径在80到250之间由100%的透明度渐变到0%


-webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));

红色底(图层4)


background-color:#EE1D25;

 小技巧:通常情况下CSS属性值中,后出现的属性值会覆盖前面的属性,而-webkit-gradient中多层背景渐变是放在同一个属性值时,先出现的值至于最顶层,从上到下的顺序展示,像多个div使用z-index的后有层级高低的表现,由此我们把上面的代码合并如下:


.bg{
    background-image:-webkit-gradient(radial,50% 50%,40,50% 50%,180,from(rgba(249,161,22,0.7)),to(rgba(249,161,22,0))),
                     -webkit-gradient(radial,50% 50%,80,50% 50%,250,from(rgba(249,109,22,1)),to(rgba(249,109,22,0)));
  background-color:#EE1D25;
}    

ok!搞定~

代码下载

作者:白树

出处:http://peunzhang.cnblogs.com/

网友评论

登录后评论
0/500
评论
白树
+ 关注