CSS渐变及简单特效
渐变是图片，不是颜色。CSS中渐变分为，线性渐变和径向渐变两种。
1 线性渐变
为了创建一个线性渐变，需要设置一个起始点和一个方向（指定为一个角度）。还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
语法：
/*默认从上到下发生渐变*/
background-image:linear-gradient(red,blue);
/*改变渐变方向：（top bottom left right）*/
background-image:linear-gradient(to 结束的方向,red,blue);
/*使用角度（单位/deg）*/
background-image:linear-gradient(角度,red,blue);
/*颜色节点的分布（第一个不写为0%，最后一个不写为100%）*/
background-image:linear-gradient(red 长度或者百分比,blue 长度或者百分比);
/*重复渐变*/
background-image:repeating-linear-gradient(60deg,red 0,blue 30%);
示例：发廊灯
<head>
<meta charset="UTF-8">
<title>线性渐变</title>
<style type="text/css">
.wrap{
width: 300px;
height: 40px;
overflow: hidden;
}
.inner{
width: 1000px;
height: 40px;
background-image: repeating-linear-gradient(45deg,black 0px,black 15px,#FFF 15px,#FFF 30px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
<script type="text/javascript">
var inner = document.querySelector(".wrap > .inner");
var count = 0;
setInterval(function(){
count++;
if(count == 423){
count = 0;
}
inner.style.marginLeft = "-" + count + "px"
},1000/60)
</script>
</body>
效果：
示例：光斑动画（仅适用于谷歌浏览器）
<head>
<meta charset="UTF-8">
<title>光斑动画</title>
<style type="text/css">
body{
background-color: black;
}
.wrap{
width: 80%;
margin: 20% auto;
text-align: center;
color: rgba(255,255,255,0.5);
font: 40px "微软雅黑";
background-image: linear-gradient(135deg,rgba(0,0,0,.5) 20px,rgba(255,255,255,1) 60px,rgba(0,0,0,.5) 100px);
-webkit-background-clip: text;
}
.wrap:hover{
background-image: linear-gradient(135deg,rgba(0,0,0,.5) 420px,rgba(255,255,255,.5) 460px,rgba(0,0,0,.5) 500px);
}
</style>
</head>
<body>
<div class="wrap">
HELLO WORLD 你好啊 !
</div>
<script type="text/javascript">
var wrap = document.querySelector(".wrap");
var count = -100;
setInterval(function(){
count+=5;
if(count == 500){
count = -100;
}
wrap.style.backgroundImage = "linear-gradient(135deg,rgba(0,0,0,.5) " + (count + 20) + "px,rgba(255,255,255,.5) " + (count + 60) + "px,rgba(0,0,0,.5) " + (count + 100) + "px)";
},1000/60)
</script>
</body>
效果：
2 径向渐变
radial-gradient() 函数创建一个<image>，用来展示由原点（渐变中心）辐射开的颜色渐变。
语法：
/*默认均匀分布*/
background-image: radial-gradient(red,blue);
/*不均匀分布*/
background-image: radial-gradient(red 50%,blue 70%);
/*改变渐变的形状*/
background-image: radial-gradient(circle ,red,blue);
可选值：
circle
ellipse（默认为椭圆）
/*渐变形状的大小*/
background-image: radial-gradient(closest-corner circle ,red,blue);
可选值：
closest-side 最近边
farthest-side 最远边
closest-corner 最近角
farthest-corner 最远角 （默认值）
/*改变圆心*/
background-image: radial-gradient(closest-corner circle at 10px 10px,red,blue);
示例：
<head>
<meta charset="UTF-8">
<title>径向渐变</title>
<style type="text/css">
.wrap{
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}
.inner{
width: 300px;
height: 300px;
background-image: repeating-radial-gradient(black 0px,black 100px,#FFF 100px,#FFF 200px);
}
</style>
</head>
<body>
<div class="wrap">
<div class="inner"></div>
</div>
<script type="text/javascript">
var inner = document.querySelector(".wrap > .inner");
var count = 200;
var mark = true;
setInterval(function(){
if(mark){
count--;
if(count == 10){
mark = false
}
} else {
count++;
if(count == 200){
mark = true
}
}
inner.style.backgroundImage = "repeating-radial-gradient(black 0px,black " + count + "px,#FFF " + count + "px,#FFF " + count * 2 + "px)"
},1000/30)
</script>
</body>
效果：
