<!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>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 20px;
}
.container {
text-align: center;
background: rgba(255, 255, 255, 0.1);
padding: 40px;
border-radius: 20px;
backdrop-filter: blur(10px);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
h1 {
color: white;
margin-bottom: 30px;
font-size: 2.5em;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}
.pen-container {
position: relative;
width: 200px;
height: 400px;
margin: 0 auto 30px;
perspective: 1000px;
}
.pen {
position: relative;
width: 100%;
height: 100%;
transform-style: preserve-3d;
transition: transform 0.3s ease;
}
.pen-body {
position: absolute;
top: 50px;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 250px;
background: linear-gradient(45deg, #ff6b6b, #ee5a24);
border-radius: 15px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}
.pen-tip {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 20px;
height: 50px;
background: linear-gradient(45deg, #feca57, #ff9ff3);
border-radius: 10px 10px 0 0;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.pen-button {
position: absolute;
bottom: 80px;
left: 50%;
transform: translateX(-50%);
width: 40px;
height: 30px;
background: linear-gradient(45deg, #48dbfb, #0abde3);
border-radius: 20px;
cursor: pointer;
transition: all 0.2s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.pen-button:hover {
transform: translateX(-50%) scale(1.1);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.pen-button:active {
transform: translateX(-50%) scale(0.95);
}
.pen-clip {
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
width: 25px;
height: 40px;
background: linear-gradient(45deg, #1dd1a1, #10ac84);
border-radius: 5px;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.pen-tip-inner {
position: absolute;
top: 5px;
left: 50%;
transform: translateX(-50%);
width: 8px;
height: 15px;
background: #2c2c2c;
border-radius: 4px;
}
.pen-clicked .pen-tip {
animation: clickAnimation 0.3s ease;
}
@keyframes clickAnimation {
0% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(10px); }
100% { transform: translateX(-50%) translateY(0); }
}
.status {
color: white;
font-size: 1.2em;
margin-bottom: 20px;
padding: 10px 20px;
background: rgba(255, 255, 255, 0.2);
border-radius: 25px;
backdrop-filter: blur(5px);
}
.counter {
color: white;
font-size: 1.1em;
margin-top: 20px;
}
.instructions {
color: rgba(255, 255, 255, 0.8);
margin-top: 20px;
font-size: 1em;
line-height: 1.6;
}
.reset-btn {
background: linear-gradient(45deg, #ff9ff3, #feca57);
color: white;
border: none;
padding: 12px 24px;
border-radius: 25px;
cursor: pointer;
font-size: 1em;
margin-top: 20px;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.reset-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.reset-btn:active {
transform: translateY(0);
}
@media (max-width: 600px) {
.container {
padding: 20px;
}
h1 {
font-size: 2em;
}
.pen-container {
width: 150px;
height: 300px;
}
.pen-body {
height: 180px;
top: 40px;
}
.pen-tip {
height: 40px;
}
}
</style>
</head>
<body>
<div class="container">
<h1>🖱️ 在线按动笔</h1>
<div class="status" id="status">笔已收回</div>
<div class="pen-container">
<div class="pen" id="pen">
<div class="pen-tip">
<div class="pen-tip-inner"></div>
</div>
<div class="pen-body"></div>
<div class="pen-button" id="penButton"></div>
<div class="pen-clip"></div>
</div>
</div>
<div class="counter">
点击次数: <span id="clickCount">0</span>
</div>
<button class="reset-btn" id="resetBtn">重置计数</button>
<div class="instructions">
<p>👆 点击蓝色按钮来按动笔</p>
<p>📝 模拟真实按动笔的使用体验</p>
</div>
</div>
<script>
let isPenOut = false;
let clickCount = 0;
const pen = document.getElementById('pen');
const penButton = document.getElementById('penButton');
const status = document.getElementById('status');
const clickCountElement = document.getElementById('clickCount');
const resetBtn = document.getElementById('resetBtn');
// 按动笔按钮点击事件
penButton.addEventListener('click', function() {
isPenOut = !isPenOut;
clickCount++;
if (isPenOut) {
// 笔尖伸出
pen.classList.add('pen-clicked');
status.textContent = '笔已伸出 ✏️';
status.style.background = 'rgba(46, 204, 113, 0.3)';
} else {
// 笔尖收回
pen.classList.remove('pen-clicked');
status.textContent = '笔已收回 🖊️';
status.style.background = 'rgba(255, 255, 255, 0.2)';
}
// 更新点击次数
clickCountElement.textContent = clickCount;
// 添加按钮点击效果
this.style.transform = 'translateX(-50%) scale(0.95)';
setTimeout(() => {
this.style.transform = 'translateX(-50%) scale(1)';
}, 100);
});
// 重置计数按钮
resetBtn.addEventListener('click', function() {
clickCount = 0;
clickCountElement.textContent = '0';
this.textContent = '已重置!';
setTimeout(() => {
this.textContent = '重置计数';
}, 1000);
});
// 添加键盘支持（空格键）
document.addEventListener('keydown', function(event) {
if (event.code === 'Space') {
event.preventDefault();
penButton.click();
}
});
// 添加触摸支持
penButton.addEventListener('touchstart', function(e) {
e.preventDefault();
this.click();
});
// 页面加载完成提示
window.addEventListener('load', function() {
setTimeout(() => {
status.textContent = '点击按钮开始使用 🚀';
}, 1000);
});
</script>
</body>
</html>
index.html
index.html