css repeating-linear-gradient重复渐变
2017-01-15 02:02

repeating-linear-gradient简介

repeating-linear-gradient是css3背景色的一个新属性:重复渐变色。它能更方便的实现隔行变色的功能。

repeating-linear-gradient语法

background:repeating-linear-gradient(direction,color-stop1,color-stop2,...);

repeating-linear-gradient参数介绍

direction可以是枚举值,枚举值有两个参数,第一个是横向的,第二个是横向的,两个参数都是可选的,如果参数省略则是“to bottom”,

两个方向枚举值前可以加“to”,也可不带“to”,

"to left bottom"==="right top";

direction可以是角度,单位deg,rad都可以,使用角度时,渐变的方向是“to top”方向,然后再按照顺时针旋转角度的。

background: repeating-linear-gradient(45deg, blue, red); 
background: repeating-linear-gradient(to left top, blue, red);
background: repeating-linear-gradient(right bottom, blue, red);

以上三种写法都是正确的。

举个例子

.linear-cont{
    height:300px;
    background: repeating-linear-gradient(to left top, blue, red);
}

效果如下:

repeating.png

下面用之前的linear-gradient实现一下上面的效果,

.linear-cont{
    height:300px;
    background:linear-gradient(to left top, blue, red);
}

效果如下:

linearr.png

理论上两个linear-gradient和repeating-linear-gradient实现的效果应该一样,但实际效果有所差异,并且repeating-linear-gradient实现的效果图像更平滑,更细腻。基于此,相信你自己心里也有数了,使用repeating-linear-gradient能获得更perfect的效果。

color-stop参数

repeating-linear-gradient的color-stop和linear-gradient中的color-stop参数用法相同,支持两个值,第一个是color颜色值,第二个是color的length值,为可选值。

.linear-cont{
    height:300px;
    background:repeating-linear-gradient(to left top, blue 10%, red 20%,green);
}

效果如下:

repeating-.png

可以看到repeating-linear-gradient使用多个color-stop属性的颜色渐变效果blue是从10%处开始的,而前面的10%是被green填充的,你可以看是repeating-linear-gradient是一个闭合的环形,开始缺失就由末尾填补。

repeating-linear-gradient实现隔行变色

.linear-cont{
    height:300px;
    background:repeating-linear-gradient(to left top, blue 10%, red 20%);
}

效果如下:

repeating-line.png

repeating-linear-gradient中我们设置的是到10%是蓝色,到20%是红色,然后他会把这20%的颜色重复渲染,这就是repeating的意思。

这个隔行变色是由渐变的效果的。

下面我们实现没有渐变效果的隔行变色

.linear-cont{
    height:300px;
    background:repeating-linear-gradient(to left top,blue, blue 10%,red 10%, red 20%);
}

效果如下:

normalrepeat.png

是不是有点像超人的衣服啊,

这个实现纯色的隔行变色的要点就是从0-10%我们使用“blue,blue 10%”,那么这一块就是纯蓝色了,而从10%-20%我们使用“red 10%,red 20%”,那么这一块就是纯红色了。跟之前讲的linear-gradient实现隔行变色要简单,他不用借助background-size的力量,自己就能完成了。repeating-linear-gradient天生就是为了隔行变色这一类效果设计的,所以如果你想实现隔行变色,优选repeating-linear-gradient,并且repeating-linear-gradient包含linear-gradient,linear-gradient能实现的效果,repeating-linear-gradient都能实现,最主要的是他实现的渐变效果似乎要更平滑些。


原创文章,转载请注明来自:妹纸前端-www.webfront-js.com.
阅读(6391)
辛苦了,打赏喝个咖啡
微信
支付宝
妹纸前端
妹纸前端工作室 | 文章不断更新中
京ICP备16005385号-1