CSS篇线性渐变 background-image：linear-gradient

说起来抽象理解最好的方式就是展示后面有3个案例代码先简单说下线性渐变从起点到终点的这么一个过程必备条件：起点、终点选填：在起点与终点之间可以添加任一多个点每一个点需要有一个位置、颜色background-imagelinear-gradient旋转度数degrepeating-linear-gradient重复线性渐变案例1<!DOCTYPE html><html>&l

王先生6666

2990人浏览 · 2021-11-23 17:25:52

王先生6666 · 2021-11-23 17:25:52 发布

说起来抽象理解最好的方式就是展示后面有3个案例代码
先简单说下
线性渐变
从起点到终点的这么一个过程
必备条件：起点、终点
选填：在起点与终点之间可以添加任一多个点
每一个点需要有一个位置、颜色

background-image
					linear-gradient
					旋转度数	deg 
					repeating-linear-gradient	重复线性渐变

案例1


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	 
		<style>
			div{
				width: 500px;
				height: 500px;
				border: 10px solid #000;
				background-image: linear-gradient(0deg, red 0%, blue 100%);
			}
		</style>
	</head>
	<body>
		<div></div>
		加wx   wzq85006194
	</body>
</html>

案例2

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 
		<style>
			div{
				width: 600px;
				height: 600px;
				border: 10px solid #000;
				/*background-image: linear-gradient(0deg, #fff 20%, #000 20%, #000 40%, #fff 40%, #fff 60%, #000 60%, #000 80%, #fff 80%);*/
				background-image: repeating-linear-gradient(0deg, #fff 0px, #fff 100px, #000 100px, #000 200px);
			}
		</style>
	</head>
	<body>
		<div></div>
		加wx   wzq85006194
	</body>
</html>

案例3

这个案例需要把鼠标放到黑色div上

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		 
		<style>
			div{
				width: 600px;
				height: 600px;
				background-color: #000;
				background-image: linear-gradient(135deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 45%,rgba(255,255,255,.8) 50%,rgba(255,255,255,0) 55%,rgba(255,255,255,0) 100%);
				background-position: -600px -600px;
				background-repeat: no-repeat;
				transition: 5s;
			}
			div:hover{
				background-position: 600px 600px;
			}
		</style>
	</head>
	<body>
		<div></div>
		加wx   wzq85006194
	</body>
</html>