📝 情報共有キーワード検索 📝
📚 候補1: 情報管理 📚
💼 候補2: プロジェクト管理 💼
🏢 候補3: オフィス業務 🏢
📌クリックして検索！📌
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>情報共有キーワード検索</title>
<style>
@keyframes bounce {
0%, 20%, 50%, 80%, 100% {
transform: translateY(0);
}
40% {
transform: translateY(-30px);
}
60% {
transform: translateY(-15px);
}
}
@keyframes shake {
0%, 100% {
transform: translateX(0);
}
25% {
transform: translateX(-10px);
}
50% {
transform: translateX(10px);
}
75% {
transform: translateX(-10px);
}
}
</style>
</head>
<body>
<div style="width: 400px; height: 400px; border: 2px solid #000; overflow: hidden; position: relative;">
<div style="padding: 10px; font-size: 16px; text-align: center;">
📝 情報共有キーワード検索 📝
</div>
<div style="margin: 20px; text-align: center;">
<input type="text" id="keyword" placeholder="キーワードを入力..." style="width: 80%; padding: 10px; font-size: 16px;">
<button onclick="searchKeyword()" style="padding: 10px; font-size: 16px;">🔍検索</button>
</div>
<div id="results" style="margin: 20px; font-size: 16px;">
<div id="candidate1" style="animation: bounce 2s infinite; display: none;">📚 候補1: 情報管理 📚</div>
<div id="candidate2" style="animation: bounce 2s infinite 0.5s; display: none;">💼 候補2: プロジェクト管理 💼</div>
<div id="candidate3" style="animation: bounce 2s infinite 1s; display: none;">🏢 候補3: オフィス業務 🏢</div>
</div>
<div style="position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%);">
📌クリックして検索！📌
</div>
</div>
<script>
function searchKeyword() {
const keyword = document.getElementById('keyword').value;
if (keyword) {
document.getElementById('candidate1').style.display = 'block';
document.getElementById('candidate2').style.display = 'block';
document.getElementById('candidate3').style.display = 'block';
document.getElementById('results').style.animation = "shake 0.5s";
setTimeout(() => {
document.getElementById('results').style.animation = "";
}, 500);
}
}
</script>
</body>
</html>
```