键盘英雄特效

原创已于 2025-06-27 15:26:02 修改 · 424 阅读

CC 4.0 BY-SA版权

文章标签：

于 2025-04-30 15:08:59 首次发布

<!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;
background-color: #000;
overflow: hidden;
font-family: 'Arial', sans-serif;
color: white;
text-align: center;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
}

h1 {
font-size: 3em;
margin-bottom: 20px;
text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #e60073, 0 0 40px #e60073;
}

.instructions {
margin-bottom: 30px;
font-size: 1.2em;
opacity: 0.8;
}

.particle {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
pointer-events: none;
animation: fadeOut 1s forwards;
}

@keyframes fadeOut {
to {
opacity: 0;
transform: translateY(-50px) scale(1.5);
}
}

.key-display {
font-size: 2em;
margin-top: 20px;
min-height: 60px;
}

.link {
position: fixed;
bottom: 20px;
color: #aaa;
font-size: 0.8em;
text-decoration: none;
transition: color 0.3s;
}

.link:hover {
color: #fff;
}
</style>
</head>
<body>
<h1>键盘英雄</h1>
<div class="instructions">按下任意键触发炫丽特效</div>
<div class="key-display"></div>


<script>
const colors = [
'#FF0000', '#FF7F00', '#FFFF00', '#00FF00',
'#0000FF', '#4B0082', '#9400D3', '#FF1493',
'#00FFFF', '#FF00FF', '#7CFC00', '#FFD700'
];

const keyDisplay = document.querySelector('.key-display');

document.addEventListener('keydown', (e) => {
// 显示按下的键
keyDisplay.textContent = `你按下了: ${e.key.toUpperCase()}`;

// 创建粒子效果
for (let i = 0; i < 20; i++) {
createParticle(e.key.toUpperCase());
}
});

function createParticle(key) {
const particle = document.createElement('div');
particle.className = 'particle';

// 随机颜色
const color = colors[Math.floor(Math.random() * colors.length)];
particle.style.backgroundColor = color;

// 随机位置
const x = Math.random() * window.innerWidth;
const y = window.innerHeight;
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;

// 随机大小
const size = Math.random() * 10 + 5;
particle.style.width = `${size}px`;
particle.style.height = `${size}px`;

// 添加键字符
particle.textContent = key;
particle.style.display = 'flex';
particle.style.justifyContent = 'center';
particle.style.alignItems = 'center';
particle.style.fontWeight = 'bold';

// 随机动画延迟
particle.style.animationDelay = `${Math.random() * 0.5}s`;

document.body.appendChild(particle);

// 动画结束后移除粒子
setTimeout(() => {
particle.remove();
}, 1000);
}

// 初始显示一些随机粒子
for (let i = 0; i < 30; i++) {
setTimeout(() => {
createParticle(String.fromCharCode(65 + Math.floor(Math.random() * 26)));
}, i * 100);
}
</script>
</body>
</html>