渐变
一、线性渐变
1.语法： background-image:linear-gradient(方向（deg），颜色 渐变点的百分比)
2.方向：top,left,bottom,right,默认是top、to bottom、180deg
3.如果添加方向，必须使用浏览器的内核识别标识。例如-webkit-适用于Chrome，-moz-适用于firefox，-ms-适用于IE，-o-适用于opera
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
div{
width: 500px;
height: 200px;
background-color: tomato;
background-image: -webkit-linear-gradient( left top,cyan 20%,gold 50% ,red,tomato,hotpink);
/* left等同于to right */
}
}
</style>
<body>
<div></div>
</body>
二、径向渐变
1.语法：radial-gradient(中心点，形状，颜色 渐变点的百分比)
2.形状：circle ellipse
3.终点：closest-side,closest-corner,farthest-side,farthest-corner
<style>
*{
padding: 0;
margin: 0;
list-style: none;
}
div{
background-image: -webkit-radial-gradient(center bottom,purple,skyblue,cyan,green,yellow,orange,red);
}
</style>
</head>
<body>
<div></div>
</body>
案例一–高光
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gradient</title>
<style>
body{
background-color: #666;
}
p{
width: 400px;
height: 100px;
font-size: 60px;
line-height: 100px;
text-align: center;
background-color: gold;
background-image: linear-gradient(135deg,transparent 15%,#fff 17%,transparent 19%);
transition: 1s;
color: transparent;
/* 背景剪裁 */
-webkit-background-clip: text;
/* background-image: -webkit-linear-gradient(135deg,transparent 5%,#fff 7%,transparent 9%); */
}
p:hover{
background-position: 400px 0;
}
.yy{
width: 384px;
height: 216px;
background-image: url(https://img0.baidu.com/it/u=421509740,1039018737&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500);
background-size: cover;
-webkit-mask-image: -webkit-linear-gradient(left,white 20%,transparent 20%, transparent 40%,white 40%,white 60%,transparent 60%,transparent 80%,white 80%);
transition: 3s;
-webkit-mask-size:10% 100%;
mask-image: linear-gradient(left,white 20%,transparent 20%, transparent 40%,white 40%,white 60%,transparent 60%,transparent 80%,white 80%);
}
.yy:hover{
-webkit-mask-position: 384px 0;
}
.bg{
width: 384px;
height: 216px;
background-image: -webkit-linear-gradient(left,white 20%,transparent 20%, transparent 40%,white 40%,white 60%,transparent 60%,transparent 80%,white 80%);
background-image: linear-gradient(left,white 20%,transparent 20%, transparent 40%,white 40%,white 60%,transparent 60%,transparent 80%,white 80%);
}
</style>
</head>
<body>
<p>千山鸟飞绝</p>
<div class="yy"></div>
<div class="bg"></div>
</body>
</html>
具体效果可运行代码可见
案例二----彩虹
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>caihong</title>
<style>
body{
background-color: #ccc;
}
.ch{
width: 500px;
height: 300px;
background-image: -webkit-radial-gradient(center bottom,
transparent 30%,
purple,
deepskyblue,
cyan,
greenyellow,
gold,
tomato ,
transparent 50%);
}
</style>
</head>
<body>
<div class="ch"></div>
</body>
</html>
