HTML设计朦版背景及点击弹出浮动字方法含美化代码（四川省职高信息技术一类）

于 2025-05-09 17:09:20 发布
阅读量513 收藏
点赞数 21
CC 4.0 BY-SA版权
分类专栏： 四川省职业高中HTML 文章标签： html css 前端 html5 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2403_88399315/article/details/147832907

一：HTML文件内容

<!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" id="clickArea">
		<div class="click-area">
		    <div class="click-prompt" id="clickArea">点击页面任意位置</div>
		</div>
		<script src="JavaScript/JavaScriptdj.js"></script>
		<!-- 作者：栀子花.451 -->
		<!-- 时间：2025-5-9 -->
	</body>
</html>

二：通过外联方式添加CSS以及JavaScript

        1.CSS外链

<link rel="stylesheet" href="CSS.css" type="text/css">

        2.JavaScript外链

<script src="JavaScript/JavaScriptdj.js"></script>

三：CSS文件内容

body {
	font-family: 'Ma Shan Zheng', cursive;
	height: 100vh;
	margin: 0;
	overflow: hidden;
	position: relative;
	background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #4e4376);
	background-size: 400% 400%;
	animation: gradientBG 15s ease infinite;
}

@keyframes gradientBG {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

.click-area {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100%;
}

.click-prompt {
	padding: 15px 30px;
	background-color: rgba(255, 255, 255, 0.2);
	backdrop-filter: blur(5px);
	color: white;
	font-size: 16px;
	border-radius: 30px;
	cursor: pointer;
	border: 1px solid rgba(255, 255, 255, 0.3);
	transition: all 0.3s;
}

.click-prompt:hover {
	background-color: rgba(255, 255, 255, 0.3);
	transform: scale(1.05);
}

.float-text {
	position: absolute;
	font-size: 14px;
	font-weight: bold;
	color: #fff;
	pointer-events: none;
	animation: floatUp 1.5s forwards;
	text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
	z-index: 100;
}

@keyframes floatUp {
	0% {
		opacity: 1;
		transform: translateY(0) scale(1);
	}

	100% {
		opacity: 0;
		transform: translateY(-80px) scale(1.2);
	}
}

/* 星空效果 */
.stars {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.star {
	position: absolute;
	background-color: #fff;
	border-radius: 50%;
	animation: twinkle var(--duration) infinite ease-in-out;
}

@keyframes twinkle {

	0%,
	100% {
		opacity: 0.2;
	}

	50% {
		opacity: 1;
	}
}

四：JavaScript文件内容

// 创建星空背景
function createStars() {
	const starsContainer = document.getElementById('stars');
	const starCount = 100;

	for (let i = 0; i < starCount; i++) {
		const star = document.createElement('div');
		star.className = 'star';

		// 随机大小 (1-3px)
		const size = Math.random() * 2 + 1;
		star.style.width = `${size}px`;
		star.style.height = `${size}px`;

		// 随机位置
		star.style.left = `${Math.random() * 100}%`;
		star.style.top = `${Math.random() * 100}%`;

		// 随机闪烁时间 (2-5秒)
		star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);

		starsContainer.appendChild(star);
	}
}

// 页面加载完成后创建星星
window.addEventListener('DOMContentLoaded', createStars);

// 定义要显示的消息数组
const messages = ["星火", "相传", "时代"];
let clickCount = 0;

// 监听整个文档的点击事件
document.addEventListener('click', function(event) {
	// 创建浮动文字元素
	const floatText = document.createElement('div');
	floatText.className = 'float-text';

	// 设置文字内容和位置
	floatText.textContent = messages[clickCount % messages.length];
	floatText.style.left = `${event.clientX}px`;
	floatText.style.top = `${event.clientY}px`;

	// 随机文字颜色 (浅色系)
	const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
	floatText.style.color = colors[Math.floor(Math.random() * colors.length)];

	// 添加到body中
	document.body.appendChild(floatText);

	// 1.5秒后移除元素
	setTimeout(() => {
		floatText.remove();
	}, 1500);

	// 增加计数器
	clickCount++;

	// 点击时创建粒子效果
	createParticles(event.clientX, event.clientY);
});

// 创建点击粒子效果
function createParticles(x, y) {
	const particleCount = 8;

	for (let i = 0; i < particleCount; i++) {
		const particle = document.createElement('div');
		particle.className = 'float-text';
		particle.style.fontSize = '10px';
		particle.textContent = '✧';
		particle.style.left = `${x}px`;
		particle.style.top = `${y}px`;
		particle.style.animation = `floatUp 1s forwards`;
		particle.style.animationDelay = `${i * 0.1}s`;

		// 随机方向
		const angle = Math.random() * Math.PI * 2;
		const distance = Math.random() * 30 + 20;
		particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
		particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

		document.body.appendChild(particle);

		setTimeout(() => {
			particle.remove();
		}, 1000);
	}
}

// 更新CSS动画
const style = document.createElement('style');
style.textContent = `
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--endX, 0), var(--endY, -80px)) scale(1.5);
    }
}
`;
document.head.appendChild(style);

五：合并成一个文件后的内容

<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>星空点击效果</title>
		<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
		<style>
			body {
				font-family: 'Ma Shan Zheng', cursive;
				height: 100vh;
				margin: 0;
				overflow: hidden;
				position: relative;
				background: linear-gradient(-45deg, #0f2027, #203a43, #2c5364, #4e4376);
				background-size: 400% 400%;
				animation: gradientBG 15s ease infinite;
			}

			@keyframes gradientBG {
				0% {
					background-position: 0% 50%;
				}

				50% {
					background-position: 100% 50%;
				}

				100% {
					background-position: 0% 50%;
				}
			}

			.click-area {
				display: flex;
				justify-content: center;
				align-items: center;
				height: 100%;
			}

			.click-prompt {
				padding: 15px 30px;
				background-color: rgba(255, 255, 255, 0.2);
				backdrop-filter: blur(5px);
				color: white;
				font-size: 16px;
				border-radius: 30px;
				cursor: pointer;
				border: 1px solid rgba(255, 255, 255, 0.3);
				transition: all 0.3s;
			}

			.click-prompt:hover {
				background-color: rgba(255, 255, 255, 0.3);
				transform: scale(1.05);
			}

			.float-text {
				position: absolute;
				font-size: 14px;
				font-weight: bold;
				color: #fff;
				pointer-events: none;
				animation: floatUp 1.5s forwards;
				text-shadow: 0 0 5px rgba(255, 255, 255, 0.8);
				z-index: 100;
			}

			@keyframes floatUp {
				0% {
					opacity: 1;
					transform: translateY(0) scale(1);
				}

				100% {
					opacity: 0;
					transform: translateY(-80px) scale(1.2);
				}
			}

			/* 星空效果 */
			.stars {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				z-index: -1;
			}

			.star {
				position: absolute;
				background-color: #fff;
				border-radius: 50%;
				animation: twinkle var(--duration) infinite ease-in-out;
			}

			@keyframes twinkle {

				0%,
				100% {
					opacity: 0.2;
				}

				50% {
					opacity: 1;
				}
			}
		</style>
	</head>
	<body>
		<div class="stars" id="stars"></div>
		<div class="click-area">
			<div class="click-prompt" id="clickArea">点击任意位置</div>
		</div>

		<!-- 外链 JavaScript 文件 -->
		<script>
			// 创建星空背景
			function createStars() {
				const starsContainer = document.getElementById('stars');
				const starCount = 100;

				for (let i = 0; i < starCount; i++) {
					const star = document.createElement('div');
					star.className = 'star';

					// 随机大小 (1-3px)
					const size = Math.random() * 2 + 1;
					star.style.width = `${size}px`;
					star.style.height = `${size}px`;

					// 随机位置
					star.style.left = `${Math.random() * 100}%`;
					star.style.top = `${Math.random() * 100}%`;

					// 随机闪烁时间 (2-5秒)
					star.style.setProperty('--duration', `${Math.random() * 3 + 2}s`);

					starsContainer.appendChild(star);
				}
			}

			// 页面加载完成后创建星星
			window.addEventListener('DOMContentLoaded', createStars);

			// 定义要显示的消息数组
			const messages = ["星火", "相传", "时代"];
			let clickCount = 0;

			// 监听整个文档的点击事件
			document.addEventListener('click', function(event) {
				// 创建浮动文字元素
				const floatText = document.createElement('div');
				floatText.className = 'float-text';

				// 设置文字内容和位置
				floatText.textContent = messages[clickCount % messages.length];
				floatText.style.left = `${event.clientX}px`;
				floatText.style.top = `${event.clientY}px`;

				// 随机文字颜色 (浅色系)
				const colors = ['#ff9ff3', '#feca57', '#ff6b6b', '#48dbfb', '#1dd1a1'];
				floatText.style.color = colors[Math.floor(Math.random() * colors.length)];

				// 添加到body中
				document.body.appendChild(floatText);

				// 1.5秒后移除元素
				setTimeout(() => {
					floatText.remove();
				}, 1500);

				// 增加计数器
				clickCount++;

				// 点击时创建粒子效果
				createParticles(event.clientX, event.clientY);
			});

			// 创建点击粒子效果
			function createParticles(x, y) {
				const particleCount = 8;

				for (let i = 0; i < particleCount; i++) {
					const particle = document.createElement('div');
					particle.className = 'float-text';
					particle.style.fontSize = '10px';
					particle.textContent = '✧';
					particle.style.left = `${x}px`;
					particle.style.top = `${y}px`;
					particle.style.animation = `floatUp 1s forwards`;
					particle.style.animationDelay = `${i * 0.1}s`;

					// 随机方向
					const angle = Math.random() * Math.PI * 2;
					const distance = Math.random() * 30 + 20;
					particle.style.setProperty('--endX', `${Math.cos(angle) * distance}px`);
					particle.style.setProperty('--endY', `${Math.sin(angle) * distance}px`);

					document.body.appendChild(particle);

					setTimeout(() => {
						particle.remove();
					}, 1000);
				}
			}

			// 更新CSS动画
			const style = document.createElement('style');
			style.textContent = `
@keyframes floatUp {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    100% {
        opacity: 0;
        transform: translate(var(--endX, 0), var(--endY, -80px)) scale(1.5);
    }
}
`;
			document.head.appendChild(style);
		</script>
	</body>
</html>

评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值