CSS3--gradient
gradient主要用于渐变,来实现一些特效,现在网上已经有了很多较好的文章,以我现在菜鸟的级别估计很难写的比他好,所以在这里直接上链接
来自w3cplus:http://www.w3cplus.com/content/css3-gradient
在这里我主要来讲一下可以用它来做什么好玩的东西(一下均在谷歌浏览器中运行)
案例一:滚动条(先上图)
瞧上面那个图就是用线性渐变(当然还有一个镜像渐变)做成的,那是怎么做成的呢,直接上代码(其实很简单)。
<!--HTML部分--> <div class="gradient"></div>
/*CSS部分*/ .gradient{width: 200px;height: 20px;background: repeating-linear-gradient(45deg,greenyellow,greenyellow 5px,#e5e5e5 5px,#e5e5e5 10px);}
直接从linear-gradient讲起,首先看第一个参数45deg,它是用来控制渐变的方向的,
如果为0将是这样的效果:
45deg:
90deg:
估计现在都明白了。然后就是后面的greenyellow,greenyellow 5px,#e5e5e5 5px,#e5e5e5 10px。我们其实可以分成两组看
第一组:greenyellow,greenyellow 5px这个代表起点和终点都是greenyellow,但是要多宽呢,实际上是5px,因为前面那个是从0开始,那么就出现了一条绿色带,然后灰色带也是这样形成的(第二组:#e5e5e5 5px,#e5e5e5 10px)只不过,如果要实现中间没有渐变的效果,#e5e5e5的起点就必须是5px位置处,如果是10px,那么5px~10px之间就会是greenyellow~#e5e5e5的渐变色。
为了方便观察,我们用下面的代码
.gradient{width: 200px;height: 20px;background: repeating-linear-gradient(90deg,red,red 10px,#000 10px,#000 20px);}
.gradient{width: 200px;height: 20px;background: repeating-linear-gradient(90deg,red,red 10px,#000 20px,#000 30px);}
再看上面代码绿色变化的部分,
这时我们发现在10~20px之间就会有渐变色。(就是为了说明这个小问题,也是够拼的)
最后就是将linear-gradient变成repeating-linear-gradient。意思和background-image:repeat,差不多。
那么我们滚动条的背景图片就成了。
案例2:同心圆箭靶
<div class="radial-gradient">div>
.radial-gradient{width: 100px;height: 100px;border: 1px solid blueviolet;border-radius: 50px; background: repeating-radial-gradient(circle,red, red 5px,orange 5px, orange 10px);}
效果:
circle代表以圆形向外渐变,ellipse则为椭圆,用法和线性渐变差不多,自己多动动手就会了。
当然如果有兴趣可以去这个网站看一下,gradient还可以做出哪些特效:http://lea.verou.me/css3patterns/