I’ll help create a Chinese fortune-telling web application. Here’s my approach:
- Create a traditional Chinese-themed interface with bamboo elements
- Implement a realistic bamboo stick drawing animation
- Add a fortune database with different levels of results
- Include user input for their inquiry
- Create smooth animations for the drawing process
View Source
HTML
<div id="fortune-app">
<div class="container">
<h1 class="title">梅花香来运转好</h1>
<div class="input-group">
<label for="user-inquiry">您的疑问：</label>
<input type="text" id="user-inquiry" placeholder="请输入您的疑问">
</div>
<button id="draw-lot-button" class="draw-button">掷签</button>
<div id="animation-container" class="animation-container">
<div class="bamboo-sticks"></div>
<div class="stick"></div>
</div>
<div id="fortune-result" class="result-display">
<div class="fortune-level"></div>
<div class="fortune-comment"></div>
</div>
</div>
</div>
CSS
#fortune-app {
font-family: 'Noto Serif SC', serif;
background: #f5deb3;
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 20px;
}
.container {
background: #e7885b;
border-radius: 15px;
padding: 30px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
max-width: 600px;
width: 100%;
}
.title {
color: #ffd700;
text-align: center;
font-size: 24px;
margin-bottom: 20px;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}
.input-group {
margin-bottom: 20px;
}
input[type="text"] {
width: 100%;
padding: 10px;
background: #fff;
border: 2px solid #ffd700;
border-radius: 5px;
font-size: 16px;
}
.draw-button {
background: #ff6b6b;
color: #fff;
border: none;
padding: 10px 20px;
border-radius: 5px;
font-size: 16px;
cursor: pointer;
transition: background 0.3s;
}
.draw-button:hover {
background: #ff5252;
}
.animation-container {
position: relative;
height: 150px;
margin: 20px 0;
animation: shake 1s infinite;
}
.bamboo-sticks {
position: absolute;
width: 100%;
height: 100%;
background: #e7885b;
border-radius: 10px;
}
.stick {
position: absolute;
width: 10px;
height: 100px;
background: #8b4513;
right: 50%;
transform: translateX(50%);
top: -100px;
animation: fall 1s forwards;
}
@keyframes shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(10px); }
75% { transform: translateX(-10px); }
}
@keyframes fall {
0% { transform: translateX(50%) translateY(-100px); }
100% { transform: translateX(50%) translateY(50px); }
}
.result-display {
display: none;
margin-top: 20px;
padding: 20px;
background: rgba(255, 255, 255, 0.9);
border-radius: 10px;
text-align: center;
}
.fortune-level {
font-size: 24px;
color: #ffd700;
margin-bottom: 10px;
}
.fortune-comment {
font-size: 18px;
line-height: 1.6;
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
.fade-in {
animation: fadeIn 0.5s ease-out;
}
JavaScript
// Fortune data
const fortunes = [
{
level: "大吉",
commentary: "天时地利人和，事事顺心，好运连连。"
},
{
level: "吉",
commentary: "时机尚未成熟，稍待时机，终将如愿。"
},
{
level: "平",
commentary: "平平无奇，需多加努力，方能有成。"
},
{
level: "凶",
commentary: "此事不利，需重新考虑，慎重决策。"
},
{
level: "大凶",
commentary: "万事不利，建议暂缓此事，待时机成熟。"
}
];
document.addEventListener('DOMContentLoaded', () => {
const drawButton = document.getElementById('draw-lot-button');
const animationContainer = document.getElementById('animation-container');
const resultDisplay = document.getElementById('fortune-result');
const userInquiry = document.getElementById('user-inquiry');
drawButton.addEventListener('click', async () => {
if (!userInquiry.value.trim()) {
alert('请输入您的疑问！');
return;
}
try {
// Start animation
animationContainer.style.animation = 'shake 1s';
// Wait for animation to complete
await new Promise(resolve => setTimeout(resolve, 1000));
// Stop animation
animationContainer.style.animation = 'none';
// Generate random fortune
const randomIndex = Math.floor(Math.random() * fortunes.length);
const fortune = fortunes[randomIndex];
// Display result
resultDisplay.innerHTML = `
<div class="fortune-level">${fortune.level}</div>
<div class="fortune-comment">${fortune.commentary}</div>
`;
// Add fade-in class
resultDisplay.style.display = 'block';
resultDisplay.classList.add('fade-in');
// Remove fade-in class after animation
setTimeout(() => resultDisplay.classList.remove('fade-in'), 500);
} catch (error) {
console.error('Error:', error);
alert('操作失败，请稍后再试！');
}
});
});
Preview