HTML设计动态渐变背景含美化代码（四川省职高信息技术一类）

本文链接：https://blog.csdn.net/2403_88399315/article/details/147817085

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>设置网页名称</title>
		<link rel="stylesheet" href="CSS.css" type="text/css">
	</head>
	<body class="gradient">
		<div class="maoboli">页面毛玻璃以及渐变背景</div>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-9 -->
	</body>
</html>

CSS文件

.gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 设置渐变背景的倾斜度与颜色 */
background-size: 600% 600%;
/* 设置背景的大小 */
animation: gradientBG 5s ease infinite;
/* 设置动画效果 */
}

@keyframes gradientBG {
0% {
background-position: 0% 50%;
/* 设置背景的起始位置 */
}
50% {
background-position: 100% 50%;
/* 设置背景的中间位置 */
}
100% {
background-position: 0% 50%;
/* 设置背景的结束位置 */
}
}

.maoboli {
	width: 500px;
	height: 300px;
	position: fixed;
	/* 设置元素的固定位置 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 设置元素的居中位置 */
	background-color: rgba(255, 255, 255, 0.5);
	/* 设置元素的背景颜色与透明度 */
	border-radius: 10px;
	/* 设置元素的圆角 */
	display: flex;
	/* 设置元素为弹性盒子布局 */
	justify-content: center;
	/* 设置元素的主轴对齐方式 */
	align-items: center;
	/* 设置元素的交叉轴对齐方式 */
	color: white;
	font-size: 24px;
}

渐变背景的CSS

.gradient {
background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
/* 设置渐变背景的倾斜度与颜色 */
background-size: 600% 600%;
/* 设置背景的大小 */
animation: gradientBG 5s ease infinite;
/* 设置动画效果 */
}

@keyframes gradientBG {
0% {
background-position: 0% 50%;
/* 设置背景的起始位置 */
}
50% {
background-position: 100% 50%;
/* 设置背景的中间位置 */
}
100% {
background-position: 0% 50%;
/* 设置背景的结束位置 */
}
}

居中显示毛玻璃的CSS

.maoboli {
	width: 500px;
	height: 300px;
	position: fixed;
	/* 设置元素的固定位置 */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/* 设置元素的居中位置 */
	background-color: rgba(255, 255, 255, 0.5);
	/* 设置元素的背景颜色与透明度 */
	border-radius: 10px;
	/* 设置元素的圆角 */
	display: flex;
	/* 设置元素为弹性盒子布局 */
	justify-content: center;
	/* 设置元素的主轴对齐方式 */
	align-items: center;
	/* 设置元素的交叉轴对齐方式 */
	color: white;
	font-size: 24px;
}