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

最新推荐文章于 2024-04-15 14:55:08 发布

王先生6666

最新推荐文章于 2024-04-15 14:55:08 发布

阅读量2.8k

点赞数 1

文章标签： css css3 html

本文链接：https://blog.csdn.net/weixin_42497127/article/details/121498180

版权

说起来抽象理解最好的方式就是展示后面有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>

王先生6666

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS篇线性渐变 background-image：linear-gradient

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

扫一扫