最全的CSS渐变解析
线性渐变
为了创建一个线性渐变，你需要设置一个起始点和一个方向（指定为一个角度）。你还要定义终止色。终止色就是你想让浏览器去平滑的过渡过去，并且你必须指定至少两种，当然也会可以指定更多的颜色去创建更复杂的渐变效果。
-默认从上到下发生渐变
linear-gradient(red,blue);
-改变渐变方向：（top bottom left right）
linear-gradient(to 结束的方向,red,blue);
-使用角度
linear-gradient(角度,red,blue);
background-image: linear-gradient(45deg, red, yellow);
background-image: linear-gradient(-45deg, red, yellow, green);
-颜色节点的分布（第一个不写为0%，最后一个不写为100%）
linear-gradient(red 长度或者百分比,blue 长度或者百分比);
百分百，长度，表示从该位置开始渐变
background-image:linear-gradient(90deg,red 10%,yellow 20%,green 30%) ;
background-image: linear-gradient(90deg, red 100px, yellow 100px, green 100px);
注意：黄色区域被绿色覆盖
background-image: linear-gradient(90deg, red 100px, yellow 150px);
此时100px -->150px是渐变
透明度渐变
background-image: linear-gradient(45deg, rgba(218, 25, 185, 0.2), yellow, green);
背景为黑时
背景为白时
-重复渐变
repeating-linear-gradient(60deg,red 0,blue 30%);
background-image: repeating-linear-gradient(45deg, rgba(218, 25, 185, 0.2) 100px, yellow, green 200px);
实现发廊图
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#wrap{
width: 40px;
height: 300px;
border: 1px solid;
margin: 100px auto;
overflow: hidden;
}
#wrap > .inner{
height: 600px;
background:repeating-linear-gradient(135deg,black 0px,black 10px,white 10px,white 20px);
}
</style>
</head>
<body>
<div id="wrap">
<div class="inner"></div>
</div>
</body>
<script type="text/javascript">
var inner = document.querySelector("#wrap > .inner");
var flag =0;
setInterval(function(){
flag++;
if(flag==300){
flag=0;
}
inner.style.marginTop = -flag+"px";
},1000/60)
</script>
</html>
光斑动画
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
background: black;
text-align: center;
}
h1{
/*transition: 3s;*/
margin-top: 50px;
display: inline-block;
color: rgba(255, 255, 255,.3);
font:bold 80px "微软雅黑";
background: linear-gradient(120deg,rgba(255,255,255,0) 100px ,rgba(255,255,255,1) 180px ,rgba(255,255,255,0) 260px);
background-repeat:no-repeat ;
-webkit-background-clip: text ;
}
/*h1:hover{
background-position: 500px 0;
}*/
</style>
</head>
<body>
<h1>atguigu尚硅谷</h1>
</body>
<script type="text/javascript">
var h1 = document.querySelector("h1");
var flag =-160;
setInterval(function(){
flag+=10;
if(flag==600){
flag=-160;
}
h1.style.backgroundPosition = flag+"px";
},30)
</script>
</html>
径向渐变
radial-gradient() 函数创建一个，用来展示由原点（渐变中心）辐射开的颜色渐变
默认均匀分布
radial-gradient(red,blue);
不均匀分布
radial-gradient(red 50%,blue 70%);
改变渐变的形状
- radial-gradient(circle ,red,blue)
- circle
- ellipse（默认为椭圆）
渐变形状的大小
HTMl:
<body>
<div id="test"></div>
</body>
- radial-gradient(closest-corner circle ,red,blue) （默认椭圆)
#test {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient(yellow, green 50%, pink);
}
2. closest-side 最近边
#test {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient(closest-side, yellow, green 50%, pink);
}
- farthest-side 最远边
#test {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient( farthest-side circle, yellow, green 50%, pink);
}
4. closest-corner 最近角
<style type="text/css">
*{
margin: 0;
padding: 0;
}
#test{
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image:radial-gradient( closest-corner circle at 20px 20px,yellow, green 50%,pink) ;
}
</style>
5. farthest-corner 最远角 （默认值）
#test {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient( farthest-corner circle at 20px 20px, yellow, green 50%, pink);
}
改变圆心
radial-gradient(closest-corner circle at 10px 10px,red,blue);
#test {
width: 400px;
height: 300px;
border: 1px solid;
margin: 0 auto;
background-image: radial-gradient( circle at 100px 100px, yellow, green 50%, pink);
}
后记
渐变就介绍到这里喜欢的小伙伴可以关注哦，许多好玩的CSS效果 等你来探索， 记得点赞哦，关注哦。
