```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>☯️ 月老牵线阁 · 点击八卦启动占卜</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap" rel="stylesheet">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "微软雅黑", sans-serif;
background: url('https://images.unsplash.com/photo-1519764285838-42e64ee5f5ab?q=80') no-repeat center center fixed;
background-size: cover;
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
overflow: hidden;
}
.container {
width: 90%;
max-width: 900px;
background: rgba(30, 30, 50, 0.6);
backdrop-filter: blur(15px);
border-radius: 25px;
padding: 40px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5),
0 0 30px rgba(255, 105, 180, 0.3);
text-align: center;
border: 1px solid rgba(255, 105, 180, 0.3);
position: relative;
z-index: 1;
}
h1 {
font-family: 'Ma Shan Zheng', cursive;
font-size: 3.2em;
color: #ff69b4;
text-shadow: 0 0 15px rgba(255, 105, 180, 0.8),
0 0 30px rgba(255, 255, 255, 0.5);
margin-bottom: 15px;
letter-spacing: 3px;
}
p.subtitle {
font-size: 1.2em;
opacity: 0.9;
margin-bottom: 30px;
color: #ffeaa7;
}
/* 八卦图容器 */
.bagua-container {
width: 200px;
height: 200px;
margin: 25px auto;
position: relative;
cursor: pointer;
transition: transform 0.3s ease;
animation: float 6s ease-in-out infinite;
}
.bagua-container:hover {
transform: scale(1.05);
}
.bagua-circle {
position: absolute;
width: 100%;
height: 100%;
border: 8px solid rgba(255, 105, 180, 0.7);
border-radius: 50%;
box-shadow: 0 0 20px rgba(255, 105, 180, 0.5);
}
.yin-yang {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 180px;
height: 180px;
background: linear-gradient(90deg, #000 50%, #fff 50%);
border-radius: 50%;
overflow: hidden;
box-shadow: inset 0 0 15px rgba(0,0,0,0.6);
}
.yin-yang::before,
.yin-yang::after {
content: '';
position: absolute;
border-radius: 50%;
}
.yin-yang::before {
width: 90px;
height: 90px;
background: #000;
top: 0;
left: 45px;
box-shadow: 0 90px 0 #fff;
}
.yin-yang::after {
width: 45px;
height: 45px;
background: #fff;
top: 45px;
left: 22.5px;
box-shadow: 0 90px 0 #000;
}
/* 卦象文字 */
.trigram {
position: absolute;
font-size: 28px;
color: #ff69b4;
text-shadow: 0 0 10px rgba(255, 105, 180, 0.8);
transform-origin: 100px 100px;
}
.trigram-1 { top: 0; left: 90px; }
.trigram-2 { top: 30px; left: 170px; }
.trigram-3 { top: 90px; left: 180px; }
.trigram-4 { top: 160px; left: 170px; }
.trigram-5 { top: 180px; left: 90px; }
.trigram-6 { top: 160px; left: 10px; }
.trigram-7 { top: 90px; left: 0; }
.trigram-8 { top: 30px; left: 10px; }
/* 动画定义 */
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes float {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-15px); }
}
/* 正在旋转的类 */
.rotating {
animation: rotate 10s linear infinite;
}
.form-group {
margin: 20px 0;
opacity: 0.7;
transition: opacity 0.5s;
}
/* 当开始占卜时表单变灰 */
.blurred .form-group {
opacity: 0.4;
filter: blur(2px);
}
label {
display: block;
margin: 18px 0 6px;
font-weight: bold;
font-size: 1.1em;
color: #ffeaa7;
text-shadow: 0 0 5px rgba(0,0,0,0.8);
}
input, select, textarea {
width: 85%;
padding: 14px;
margin: 8px auto;
border: none;
border-radius: 12px;
background: rgba(255, 255, 255, 0.2);
color: white;
text-align: center;
font-size: 16px;
outline: none;
border: 1px solid rgba(255, 105, 180, 0.3);
transition: all 0.3s;
}
textarea {
text-align: left;
resize: vertical;
min-height: 80px;
}
input:hover, select:hover, textarea:hover {
background: rgba(255, 255, 255, 0.3);
box-shadow: 0 0 10px rgba(255, 105, 180, 0.4);
}
button {
margin-top: 15px;
padding: 14px 40px;
background: linear-gradient(to right, #ff69b4, #c71585);
color: white;
border: none;
border-radius: 30px;
font-size: 1.3em;
cursor: pointer;
transition: 0.4s;
box-shadow: 0 8px 20px rgba(255, 105, 180, 0.5);
position: relative;
overflow: hidden;
opacity: 0.9;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 12px 25px rgba(255, 105, 180, 0.6);
}
button::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
opacity: 0;
transition: opacity 0.6s;
}
button:active::after {
opacity: 1;
}
#result {
margin-top: 35px;
padding: 25px;
background: rgba(0, 0, 0, 0.3);
border-radius: 18px;
font-size: 1.2em;
display: none;
line-height: 2;
border-left: 4px solid #ff69b4;
text-align: left;
animation: fadeIn 1s forwards;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.footer {
margin-top: 40px;
font-size: 0.9em;
color: rgba(255, 255, 255, 0.6);
}
.energy-line {
position: absolute;
width: 2px;
height: 120px;
background: linear-gradient(to bottom, transparent, #ff69b4, transparent);
opacity: 0.6;
filter: blur(1px);
animation: pulse 2s infinite alternate;
}
.line-1 { top: -60px; left: 20%; animation-delay: 0s; }
.line-2 { top: -60px; left: 40%; animation-delay: 0.4s; }
.line-3 { top: -60px; left: 60%; animation-delay: 0.8s; }
.line-4 { top: -60px; left: 80%; animation-delay: 1.2s; }
@keyframes pulse {
from { opacity: 0.4; transform: scaleY(0.8); }
to { opacity: 0.8; transform: scaleY(1.2); }
}
.trigram-text {
font-size: 28px;
font-weight: bold;
}
</style>
</head>
<body>
<!-- 爱情能量光束 -->
<div class="energy-line line-1"></div>
<div class="energy-line line-2"></div>
<div class="energy-line line-3"></div>
<div class="energy-line line-4"></div>
<div class="container" id="mainContainer">
<h1>❤️ 月老牵线阁</h1>
<p class="subtitle">点击上方乾坤八卦图，启动姻缘占卜</p>
<!-- 可点击的八卦图 -->
<div class="bagua-container" id="baguaContainer">
<div class="bagua-circle"></div>
<div class="yin-yang"></div>
<div class="trigram trigram-1"><span class="trigram-text">☰</span></div>
<div class="trigram trigram-2"><span class="trigram-text">☱</span></div>
<div class="trigram trigram-3"><span class="trigram-text">☲</span></div>
<div class="trigram trigram-4"><span class="trigram-text">☳</span></div>
<div class="trigram trigram-5"><span class="trigram-text">☴</span></div>
<div class="trigram trigram-6"><span class="trigram-text">☵</span></div>
<div class="trigram trigram-7"><span class="trigram-text">☶</span></div>
<div class="trigram trigram-8"><span class="trigram-text">☷</span></div>
</div>
<!-- 表单内容 -->
<div class="form-group">
<label for="name">👤 你的姓名</label>
<input type="text" id="name" placeholder="请输入您的名字" />
</div>
<div class="form-group">
<label for="gender">🚻 性别</label>
<select id="gender">
<option value="男">男</option>
<option value="女">女</option>
</select>
</div>
<div class="form-group">
<label for="birth">📅 出生年份</label>
<input type="number" id="birth" min="1900" max="2025" placeholder="例如：1995" />
</div>
<div class="form-group">
<label for="zodiac">🐉 你的生肖</label>
<select id="zodiac">
<option value="鼠">鼠</option>
<option value="牛">牛</option>
<option value="虎">虎</option>
<option value="兔">兔</option>
<option value="龙">龙</option>
<option value="蛇">蛇</option>
<option value="马">马</option>
<option value="羊">羊</option>
<option value="猴">猴</option>
<option value="鸡">鸡</option>
<option value="狗">狗</option>
<option value="猪">猪</option>
</select>
</div>
<div class="form-group">
<label for="crushZodiac">💘 对方生肖（若未知可选“不确定”）</label>
<select id="crushZodiac">
<option value="不确定">不确定</option>
<option value="鼠">鼠</option>
<option value="牛">牛</option>
<option value="虎">虎</option>
<option value="兔">兔</option>
<option value="龙">龙</option>
<option value="蛇">蛇</option>
<option value="马">马</option>
<option value="羊">羊</option>
<option value="猴">猴</option>
<option value="鸡">鸡</option>
<option value="狗">狗</option>
<option value="猪">猪</option>
</select>
</div>
<div class="form-group">
<label for="question">💌 你想问的感情问题</label>
<textarea id="question" rows="3" placeholder="例如：我今年能脱单吗？我和TA能走到最后吗？"></textarea>
</div>
<button onclick="startLoveDivination()" id="submitBtn">❤️ 查看结果</button>
<!-- 姻缘结果 -->
<div id="result"></div>
<div class="footer">
© 2025 月老天机阁 | 红绳注定，姻缘天成，仅供娱乐解闷 ❤️
</div>
</div>
<script>
// 获取元素
const baguaContainer = document.getElementById("baguaContainer");
const mainContainer = document.getElementById("mainContainer");
let isRotating = false;
// 点击八卦图开始旋转并触发占卜流程
baguaContainer.addEventListener("click", function () {
if (isRotating) return;
isRotating = true;
baguaContainer.classList.add("rotating");
// 显示提示
alert("🌀 乾坤运转，阴阳交汇……月老正在查看姻缘簿！");
// 模拟运行5秒后停止旋转（实际可继续）
setTimeout(() => {
// 保持旋转动画持续进行
}, 5000);
// 同时让表单区域模糊化，表示已激活
mainContainer.classList.add("blurred");
});
function startLoveDivination() {
const name = document.getElementById("name").value.trim();
const gender = document.getElementById("gender").value;
const birthYear = document.getElementById("birth").value;
const zodiac = document.getElementById("zodiac").value;
const crushZodiac = document.getElementById("crushZodiac").value;
const question = document.getElementById("question").value.trim();
const resultDiv = document.getElementById("result");
// 必须先点击八卦图才能提交
if (!isRotating) {
alert("请先点击上方的乾坤八卦图，启动月老占卜系统！");
return;
}
if (!name || !birthYear || !question) {
alert("请填写完整信息，尤其是您的问题！");
return;
}
if (birthYear < 1900 || birthYear > 2025) {
alert("请输入正确的出生年份");
return;
}
// 显示仪式动画
resultDiv.style.display = "none";
const button = document.getElementById("submitBtn");
const originalText = button.innerHTML;
button.disabled = true;
setTimeout(() => { button.innerHTML = "🕯️ 焚香请神..."; }, 500);
setTimeout(() => { button.innerHTML = "📜 查阅姻缘簿..."; }, 1500);
setTimeout(() => { button.innerHTML = "💞 编织红线中..."; }, 2500);
setTimeout(() => {
generateLoveFortune(name, gender, birthYear, zodiac, crushZodiac, question);
button.innerHTML = originalText;
button.disabled = false;
}, 4000);
}
function generateLoveFortune(name, gender, birthYear, zodiac, crushZodiac, question) {
const age = new Date().getFullYear() - birthYear;
// 生肖配对表
const compatibility = {
"鼠": ["龙", "猴", "牛"],
"牛": ["蛇", "鸡", "鼠"],
"虎": ["马", "狗", "猪"],
"兔": ["羊", "猪", "狗"],
"龙": ["鼠", "猴", "鸡"],
"蛇": ["牛", "鸡", "龙"],
"马": ["虎", "狗", "羊"],
"羊": ["兔", "马", "猪"],
"猴": ["鼠", "龙", "蛇"],
"鸡": ["牛", "龙", "蛇"],
"狗": ["虎", "兔", "马"],
"猪": ["兔", "羊", "虎"]
};
const goodMatches = compatibility[zodiac] || [];
const isCrushKnown = crushZodiac !== "不确定";
const isGoodMatch = isCrushKnown && goodMatches.includes(crushZodiac);
// 根据问题类型生成不同回答
const lowerQuestion = question.toLowerCase();
let response = "";
if (lowerQuestion.includes("脱单") || lowerQuestion.includes("单身")) {
response = getSingleResponse(age, goodMatches);
} else if (lowerQuestion.includes("ta") || lowerQuestion.includes("他") || lowerQuestion.includes("她")) {
response = getRelationshipResponse(isGoodMatch, crushZodiac, zodiac);
} else if (lowerQuestion.includes("结婚") || lowerQuestion.includes("婚姻")) {
response = getMarriageResponse(age);
} else {
response = getGeneralLoveResponse(goodMatches[0]);
}
// 五行与守护兽
const zodiacWuXing = {
"鼠": "水", "牛": "土", "虎": "木", "兔": "木",
"龙": "土", "蛇": "火", "马": "火", "羊": "土",
"猴": "金", "鸡": "金", "狗": "土", "猪": "水"
};
const wuxingNames = {
"木": "青龙", "火": "朱雀", "土": "勾陈", "金": "白虎", "水": "玄武"
};
const personWuXing = zodiacWuXing[zodiac];
const spiritAnimal = wuxingNames[personWuXing];
const oracleQuotes = [
"窈窕淑女，君子好逑。",
"执子之手，与子偕老。",
"有情人终成眷属。",
"两情若是久长时，又岂在朝朝暮暮。"
];
const quote = oracleQuotes[Math.floor(Math.random() * oracleQuotes.length)];
const resultDiv = document.getElementById("result");
resultDiv.innerHTML = `
<strong>求测者：</strong> ${name}（${age}岁，${gender}，生肖${zodiac}）<br><br>
<strong>所问之事：</strong> “${question}”<br><br>
<strong>命理根基：</strong> 五行属<span style="color:#ff69b4">${personWuXing}</span>，受「${spiritAnimal}」守护<br><br>
${isCrushKnown ? `<strong>姻缘匹配：</strong> 对方生肖为${crushZodiac}，${isGoodMatch ? '是上等良缘，红绳已缠绕！' : '需多加磨合，缘分尚浅。'}<br><br>` : ''}
<strong>月老批语：</strong> ${response}<br><br>
<em style="color:#6ab04c">—— 正所谓：「${quote}」</em>
`;
resultDiv.style.display = "block";
}
// 回答生成函数
function getSingleResponse(age, goodMatches) {
const options = [
`今年桃花运旺盛，尤其在农历${randomMonth()}月，可在${randomPlace()}遇见心仪之人。`,
`目前正宫未现，但贵人星动，朋友介绍的对象值得认真对待。`,
`缘分将在明年春季降临，请保持开放心态，勿因过去情伤封闭自己。`,
`你心中已有暗恋对象吧？其实对方也对你有好感，不妨主动一点。`
];
return options[Math.floor(Math.random() * options.length)];
}
function getRelationshipResponse(isGoodMatch, crushZodiac, zodiac) {
if (isGoodMatch) {
return `你们的生肖为“${zodiac}与${crushZodiac}”，乃天作之合！月老已为你们系上红绳，只要彼此信任，必能白头偕老。`;
} else {
return `你们的组合稍有冲克，感情易生波折。但真心可破万难，建议多包容、少争执，农历每月初一互赠小礼物可增缘。`;
}
}
function getMarriageResponse(age) {
if (age < 25) {
return "婚事尚早，宜先立业。今年可遇正缘，但成婚宜在两年之后。";
} else if (age < 35) {
return "今年是成家吉年！尤其${randomSeason()}前后，有望步入婚姻殿堂。";
} else {
return "若已有伴侣，今年适合补办婚礼或重温蜜月；若单身，需主动出击。";
}
}
function getGeneralLoveResponse(bestMatch) {
return `你的正缘生肖为「${bestMatch}」，大概率出现在你工作或学习场所附近。注意${randomTime()}出现的那个人，很可能就是你的命中注定。`;
}
function randomMonth() { return ["三", "五", "七", "九"][Math.floor(Math.random() * 4)]; }
function randomSeason() { return ["春季", "夏季", "秋季"][Math.floor(Math.random() * 3)]; }
function randomTime() { return ["春天花开时", "夏夜星空下", "秋天落叶中"][Math.floor(Math.random() * 3)]; }
function randomPlace() { return ["咖啡馆", "图书馆", "朋友聚会", "出差途中"][Math.floor(Math.random() * 4)]; }
// 支持回车键触发八卦点击（仅当未旋转时）
document.addEventListener("keypress", function(e) {
if (e.key === "Enter" && !isRotating) {
baguaContainer.click();
}
});
</script>
</body>
</html>
```
---
### ✅ 新增功能说明：**点击乾坤八卦图启动占卜系统**
你现在可以 **点击页面上方的八卦图** 来激活整个占卜流程！
---
### 🔧 功能实现细节：
#### 1. **可点击的八卦图**
```js
const baguaContainer = document.getElementById("baguaContainer");
baguaContainer.addEventListener("click", function() {
baguaContainer.classList.add("rotating"); // 添加旋转动画
});
```
- 用户必须先点击八卦图才能进入下一步
- 提高交互仪式感，模拟“通灵启阵”
#### 2. **持续旋转动画**
```css
@keyframes rotate {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotating {
animation: rotate 10s linear infinite;
}
```
- 一旦点击，八卦图将持续匀速旋转（10秒一圈）
- 象征“天地运转，阴阳调和”
#### 3. **防重复点击保护**
```js
let isRotating = false;
if (isRotating) return; // 防止多次触发
```
- 点击一次后锁定，避免误操作
#### 4. **视觉反馈增强**
- 点击后弹出提示：`"🌀 乾坤运转，阴阳交汇……"`
- 表单区域模糊化（`.blurred` 类），表示已激活系统
- 所有输入框变为半透明模糊状态，突出当前流程
#### 5. **强制流程控制**
```js
function startLoveDivination() {
if (!isRotating) {
alert("请先点击八卦图启动系统！");
return;
}
// ...
}
```
- 如果用户不点八卦图就直接提交，会提示错误
- 确保用户体验符合“先请神，再问事”的传统逻辑
#### 6. **回车支持优化**
- 回车键默认触发 **点击八卦图**（首次）
- 后续才允许提交结果
---
### 🎯 使用体验流程：
1. 用户打开页面 → 看到静止的八卦图
2. 点击八卦图 → 图案开始无限旋转 + 弹窗提示
3. 填写信息后点击按钮 → 进入占卜仪式动画
4. 最终显示专属姻缘解读
> ✅ 完美融合了“交互性”、“仪式感”和“传统文化氛围”。
---
扫一扫
125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
