点击弹出文字

原创已于 2025-06-27 14:17:16 修改 · 372 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-05-21 16:41:49 首次发布

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击弹出文字</title>
<style>
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
cursor: pointer;
background-color: #f0f0f0;
font-family: 'Arial', sans-serif;
}

.text-popup {
position: absolute;
font-size: 24px;
font-weight: bold;
pointer-events: none;
animation: textAnimation 1.5s ease-out forwards;
text-shadow: 1px 1px 3px rgba(0,0,0,0.3);
white-space: nowrap;
}

@keyframes textAnimation {
0% {
transform: translateY(0) scale(0.8);
opacity: 0;
}
20% {
opacity: 1;
}
100% {
transform: translateY(-100px) scale(1.2);
opacity: 0;
}
}

.footer {
position: fixed;
bottom: 10px;
width: 100%;
text-align: center;
color: #666;
font-size: 14px;
}

.footer a {
color: #ff3366;
text-decoration: none;
font-weight: bold;
}

.footer a:hover {
text-decoration: underline;
}
</style>
</head>
<body>

document.addEventListener('click', function(e) {
// 创建文字元素
const textPopup = document.createElement('div');
textPopup.className = 'text-popup';

// 随机选择文字和颜色
const randomMessage = messages[Math.floor(Math.random() * messages.length)];
const randomColor = colors[Math.floor(Math.random() * colors.length)];

textPopup.textContent = randomMessage;
textPopup.style.color = randomColor;

// 设置文字位置为点击位置
textPopup.style.left = (e.clientX - 30) + 'px';
textPopup.style.top = (e.clientY - 20) + 'px';

// 添加到页面
document.body.appendChild(textPopup);

// 动画结束后移除元素
setTimeout(() => {
textPopup.remove();
}, 1500);
});
</script>
</body>
</html>