HTML使用div设计毛玻璃包含美化代码（四川省职高信息技术一类）

最新推荐文章于 2025-05-08 12:54:29 发布

栀子花.451

最新推荐文章于 2025-05-08 12:54:29 发布

阅读量383

点赞数 16

分类专栏：四川省职业高中HTML 文章标签： html 前端

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

版权

四川省职业高中HTML 专栏收录该内容

9 篇文章

订阅专栏

<!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>
		<canvas id="particles"></canvas>
		<div class="maoboli">页面毛玻璃</div>
		<script src="JavaScript/JavaScript.js"></script>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-7 -->
	</body>
</html>

CSS.css文件与html文件再同一目录下

body {
	margin: 0;
	overflow: hidden;
	background: #000;
}

canvas {
	display: block;
}

.maoboli {
	width: 500px;
	height: 300px;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	backdrop-filter: blur(10px) brightness(90%);
	background-color: rgba(255, 255, 255, 0.5);
	border-radius: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
	color: white;
	font-size: 24px;
}

JavaScript.js文件在html同一目录中JavaScript目录文件夹下

const canvas = document.getElementById('particles');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const particles = [];
const particleCount = 100;

for (let i = 0; i < particleCount; i++) {
	particles.push({
		x: Math.random() * canvas.width,
		y: Math.random() * canvas.height,
		speed: 1 + Math.random() * 3,
		radius: 1 + Math.random() * 2,
		color: `hsl(${Math.random() * 360}, 100%, 50%)`
	});
}

function animate() {
	ctx.fillStyle = 'rgba(0, 0, 0, 0.1)';
	ctx.fillRect(0, 0, canvas.width, canvas.height);

	particles.forEach(p => {
		p.y += p.speed;
		if (p.y > canvas.height) p.y = 0;

		ctx.beginPath();
		ctx.arc(p.x, p.y, p.radius, 0, Math.PI * 2);
		ctx.fillStyle = p.color;
		ctx.fill();
	});

	requestAnimationFrame(animate);
}
animate();