鼠标点击文字特效

原创已于 2025-06-27 13:29:09 修改 · 297 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-06-06 16:35:31 首次发布

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

.text-bubble {
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
animation: float 2s ease-out forwards;
opacity: 1;
padding: 8px 15px;
border-radius: 20px;
font-weight: bold;
text-align: center;
max-width: 200px;
word-wrap: break-word;
}

@keyframes float {
0% {
transform: translate(-50%, -50%) scale(0.8);
opacity: 1;
}
100% {
transform: translate(-50%, -180%) scale(1);
opacity: 0;
}
}

.hidden-link {
position: fixed;
bottom: 10px;
right: 10px;
color: #666;
font-size: 12px;
text-decoration: none;
}

.content {
padding: 40px;
text-align: center;
}
</style>
</head>
<body>
<div class="content">
<h1>点击页面任意位置弹出文字</h1>
<p>试试在页面上点击鼠标，会弹出随机文字！</p>


</div>