简介：这是一套基于纯HTML5技术实现的塔罗牌与十二星座运势网站源码，面向前端初学者及网页设计爱好者，解决星座文化类网站快速搭建需求。资源包含183个文件，涵盖13个HTML页面、11个CSS样式文件（含Bootstrap、Font Awesome、AOS等主流框架）、8个JS交互脚本，以及85张PNG和29张JPG高清图素材，总大小37.97MB，支持开箱即用与本地预览。已有1004人学习下载，代码结构清晰独立，无需后端环境，直接打开index.html即可运行。完整实现星座运势首页、占星家介绍、十二星座详解、塔罗牌测运、占卜算术、关于我们等12个功能模块，集成轮播图、响应式Tab切换、时间轴展示、动态表单验证、图文混排及交互动画等现代网页特性，兼顾美观性与实用性。
1. 项目概述：一个纯前端的运势展示站
最近在整理一些老项目，翻出来一个几年前做的、现在看来依然挺有意思的小玩意儿：一个纯用HTML、CSS和JavaScript实现的塔罗牌占卜与十二星座运势网站。当时做这个的初衷很简单，就是想练练手，把一些前端视觉效果玩得花哨一点，同时内容又得有点趣味性，能吸引人点进来看看。塔罗牌和星座运势，这两个主题本身就自带流量和神秘感，非常适合用来做前端交互和视觉设计的实验田。
这个项目最大的特点就是“纯静态”。你不需要任何后端服务器、数据库，甚至不需要Node.js环境。所有代码——从页面结构、样式到交互逻辑——都写在了几个.html、.css和.js文件里。拿到源码后，双击index.html就能在浏览器里直接运行，效果全开。这对于前端新手来说，是个极佳的学习案例，你能清晰地看到每一个动画效果、每一次点击事件背后对应的代码是如何工作的。对于想快速搭建一个轻量级、视觉吸引人的内容展示页面的朋友，这份源码也提供了完整的骨架和可直接复用的组件。
整个网站的核心功能分为两大块：一是塔罗牌占卜模块，用户可以进行单张牌抽取，并查看牌意解读；二是十二星座运势模块，展示每个星座的当日或本周运势概览。实现的重点和难点，也恰恰在于如何用前端技术营造出“占卜”的仪式感和星座主题的视觉氛围。接下来，我就把这个项目的设计思路、关键技术实现细节，以及我在开发中踩过的坑和总结的经验，毫无保留地拆解一遍。
2. 整体架构与设计思路拆解
2.1 为什么选择纯静态HTML方案？
首先得明确，塔罗牌和星座运势这类内容，其数据（牌意、运势文案）更新频率并不高，可能一天或一周才变一次，而且不需要用户登录、发表评论等复杂交互。因此，引入PHP、Python Django或Node.js Express等后端框架，无异于“杀鸡用牛刀”，不仅增加了部署复杂度，也引入了不必要的维护成本。
纯静态方案的优点非常突出：
- 极致简单，部署无忧：源码就是全部。你可以把它放在任何能托管静态文件的地方——GitHub Pages、Netlify、Vercel，甚至是你自己的NAS或者U盘里。没有服务器配置、环境依赖的烦恼。
- 性能与速度：浏览器直接加载本地文件，或者从CDN加载，省去了后端处理和数据查询的时间，页面渲染速度极快，用户体验流畅。
- 安全省心：没有后端，就意味着没有数据库注入、服务器漏洞等安全风险。你只需要关注前端代码本身的安全（如避免XSS）即可，压力小了很多。
- 学习成本低：对于初学者，可以集中精力学习HTML/CSS/JS这三驾马车，不会被复杂的全栈概念分散注意力。
当然，缺点也很明显：内容更新需要手动修改HTML或JS文件里的数据。但对于运势类网站，这反而成了一个可控的优点——你可以精心打磨每一段文案，而不是依赖可能不稳定的自动生成接口。
2.2 视觉风格与交互设计定调
确定了技术栈，接下来就是决定网站“长什么样”和“怎么动”。塔罗牌和星座都带有神秘、复古、星空宇宙的意象。因此，在设计上我确定了几个方向：
- 色彩主题：以深色系为主，如深紫色（#4a235a）、藏青色（#1a237e）、星空黑（#0d0d0d）作为背景，营造深邃、神秘的氛围。点缀色使用金色（#ffd700）、银色（#c0c0c0）或宝石蓝（#4169e1），用于按钮、边框和高光，提升华丽感和精致度。
- 字体选择：英文标题使用带有衬线、有古典感的字体，如
Cinzel、Playfair Display（通过Google Fonts引入）。中文内容则使用系统默认的无衬线字体（如PingFang SC,Microsoft YaHei）保证可读性，但会通过字重和颜色来区分层次。 - 交互动效：这是项目的灵魂。塔罗牌抽牌必须有“洗牌”、“翻转”、“展开”的动画；星座区域切换需要有平滑的淡入淡出或3D翻转效果。这些都需要用CSS3的
transition、transform和animation，配合JavaScript的事件监听来实现。 - 响应式布局：必须确保在手机、平板、电脑上都有良好的浏览体验。这意味着要使用Flexbox或Grid进行布局，并用媒体查询（
@media）来调整不同屏幕尺寸下的元素大小、间距和排列方式。
设计心得：在开始写代码前，我强烈建议先用Figma、Sketch甚至纸笔画一个简单的线框图和风格指南。确定好主色、辅色、字体、按钮样式、卡片圆角等基础设计元素。这能极大提高后续CSS编写的效率，保持视觉风格统一。我当时就吃了没做风格指南的亏，中途反复调整颜色，浪费了不少时间。
3. 核心模块实现细节解析
3.1 塔罗牌占卜模块的实现
这个模块是交互的核心，目标是模拟真实的抽牌体验。我将其拆解为几个子步骤：牌堆初始化、洗牌动画、抽牌逻辑、牌面展示与解读。
3.1.1 数据结构与牌堆初始化
首先，我们需要在JavaScript中定义一套塔罗牌的数据。通常使用78张标准韦特塔罗牌，包括22张大阿卡纳和56张小阿卡纳。为了简化演示，我们可以先实现22张大阿卡纳。
// 在 main.js 中定义塔罗牌数据 const tarotDeck = [ { id: 0, name: "愚人", nameEn: "The Fool", imageUrl: "./images/tarot/fool.jpg", // 正位图片 imageUrlReversed: "./images/tarot/fool_reversed.jpg", // 逆位图片 meaningUp: "新的开始，冒险，无限可能。", meaningReversed: "鲁莽，犹豫不决，逃避责任。", isMajor: true }, { id: 1, name: "魔术师", nameEn: "The Magician", imageUrl: "./images/tarot/magician.jpg", imageUrlReversed: "./images/tarot/magician_reversed.jpg", meaningUp: "行动，意识，资源，沟通。", meaningReversed: "欺骗，犹豫，未充分利用的才能。", isMajor: true }, // ... 后续20张大牌数据 ];在HTML中，我们需要一个容器来放置牌堆和抽出的牌。
<!-- index.html 中的塔罗牌区域 --> <section class="tarot-section"> <h2>🔮 塔罗牌占卜</h2> <p>点击洗牌，然后抽取一张牌看看今日的启示。</p> <div class="tarot-container"> <div class="deck" id="tarotDeck"> <!-- 牌堆，由JS动态生成或CSS绘制 --> <div class="card-back"></div> <!-- 统一的牌背 --> </div> <button class="btn-shuffle" id="shuffleBtn">洗牌</button> <button class="btn-draw" id="drawBtn">抽一张牌</button> <div class="reading-result" id="readingResult"> <!-- 抽牌结果将动态插入到这里 --> </div> </div> </section>3.1.2 洗牌动画与算法
洗牌按钮被点击时，需要做两件事：一是打乱tarotDeck数组的顺序（逻辑洗牌），二是给牌堆容器一个视觉上的“抖动”或“扩散”动画（视觉洗牌）。
// 洗牌函数 - 使用经典的 Fisher-Yates 算法 function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; // ES6 解构赋值交换元素 } return array; } // 视觉洗牌动画 function visualShuffle() { const deckElement = document.getElementById('tarotDeck'); deckElement.classList.add('shuffling'); // 添加一个CSS类，触发动画 setTimeout(() => { deckElement.classList.remove('shuffling'); }, 1000); // 动画持续1秒 } // 事件监听 document.getElementById('shuffleBtn').addEventListener('click', function() { // 1. 逻辑洗牌 shuffleArray(tarotDeck); // 2. 视觉洗牌 visualShuffle(); // 3. 清空上一次的抽牌结果 document.getElementById('readingResult').innerHTML = ''; console.log('牌已洗好！'); });对应的CSS需要定义.shuffling类的动画效果，例如让牌堆轻微左右晃动、旋转，或者模拟多张牌交错移动的效果。这里可以用@keyframes实现。
/* style.css 中 */ .deck { position: relative; width: 120px; height: 180px; margin: 20px auto; transition: transform 0.3s ease; } .card-back { position: absolute; width: 100%; height: 100%; background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%); border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); border: 2px solid gold; } .deck.shuffling { animation: shuffleEffect 1s ease-in-out; } @keyframes shuffleEffect { 0%, 100% { transform: translateX(0) rotate(0deg); } 25% { transform: translateX(-10px) rotate(-5deg); } 50% { transform: translateX(10px) rotate(5deg); } 75% { transform: translateX(-5px) rotate(-3deg); } }3.1.3 抽牌与牌面展示
抽牌逻辑是从洗好的牌堆中随机选取一张（或按顺序取第一张）。然后，需要动态创建DOM元素来展示这张牌。
document.getElementById('drawBtn').addEventListener('click', function() { if (tarotDeck.length === 0) { alert('牌堆已空，请先洗牌！'); return; } // 随机抽取一张牌 const randomIndex = Math.floor(Math.random() * tarotDeck.length); const drawnCard = tarotDeck[randomIndex]; // 决定正逆位 (50%概率) const isReversed = Math.random() > 0.5; // 从牌堆中移除被抽中的牌（模拟真实抽牌） // tarotDeck.splice(randomIndex, 1); // 如果希望抽出的牌不放回，可以取消注释 displayCard(drawnCard, isReversed); }); function displayCard(card, isReversed) { const resultDiv = document.getElementById('readingResult'); resultDiv.innerHTML = ''; // 清空之前的结果 // 创建牌面元素 const cardElement = document.createElement('div'); cardElement.className = 'tarot-card drawn'; if (isReversed) { cardElement.classList.add('reversed'); } const cardImage = document.createElement('img'); cardImage.src = isReversed ? card.imageUrlReversed : card.imageUrl; cardImage.alt = card.name + (isReversed ? ' (逆位)' : ' (正位)'); cardImage.className = 'card-image'; const cardInfo = document.createElement('div'); cardInfo.className = 'card-info'; cardInfo.innerHTML = ` <h3>${card.name} ${isReversed ? '（逆位）' : '（正位）'}</h3> <p><strong>牌意解读：</strong>${isReversed ? card.meaningReversed : card.meaningUp}</p> `; cardElement.appendChild(cardImage); cardElement.appendChild(cardInfo); resultDiv.appendChild(cardElement); // 触发展示动画 setTimeout(() => { cardElement.classList.add('show'); }, 10); }展示的CSS需要精心设计，让抽出的牌有一个从牌堆“飞”出或翻转展开的动画。
.tarot-card.drawn { display: flex; flex-direction: column; align-items: center; max-width: 300px; margin: 30px auto; padding: 20px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 15px; border: 1px solid rgba(255, 215, 0, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); opacity: 0; transform: translateY(30px) scale(0.9); transition: opacity 0.8s ease, transform 0.8s ease; } .tarot-card.drawn.show { opacity: 1; transform: translateY(0) scale(1); } .tarot-card.drawn.reversed .card-image { transform: rotate(180deg); } .card-image { width: 100%; max-width: 200px; border-radius: 10px; margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.5); transition: transform 0.5s ease; }实操要点：图片资源是这类网站的大头。务必对塔罗牌图片进行优化压缩（可以用TinyPNG等工具），每张图控制在100KB以下。同时，要为每张图片准备好正位和逆位两个版本，并确保命名规则一致（如
fool.jpg和fool_reversed.jpg），方便JS动态拼接路径。如果找不到逆位图，也可以用CSS的transform: rotate(180deg);来模拟，但解读文案仍需区分正逆位。
3.2 十二星座运势模块的实现
这个模块相对更偏向内容展示，但交互和视觉设计同样重要。核心是十二个星座的导航和内容切换。
3.2.1 星座数据与页面结构
同样，我们先在JS中定义星座数据。数据可以更丰富，包括星座日期、符号、守护星、今日运势等。
const horoscopeData = [ { id: 1, name: "白羊座", date: "3.21-4.19", symbol: "♈", planet: "火星", today: "今日行动力爆棚，适合开启新项目，但需注意沟通方式，避免冲动。", color: "#FF6B6B" }, { id: 2, name: "金牛座", date: "4.20-5.20", symbol: "♉", planet: "金星", today: "财运不错，可能有意外小收获。适合享受美食，放松身心。", color: "#4ECDC4" }, // ... 其他10个星座数据 ];HTML结构设计成一个标签页（Tab）或导航列表+内容区的形式。
<section class="horoscope-section"> <h2>✨ 十二星座运势</h2> <div class="horoscope-container"> <!-- 星座导航 --> <div class="zodiac-nav" id="zodiacNav"> <!-- JS动态生成导航按钮 --> </div> <!-- 运势内容展示区 --> <div class="horoscope-content" id="horoscopeContent"> <!-- 默认显示第一个星座或提示语 --> <p class="placeholder">请从左侧选择星座查看今日运势...</p> </div> </div> </section>3.2.2 动态导航与内容切换
页面加载时，用JavaScript动态生成导航按钮，并为每个按钮绑定点击事件。
function initHoroscope() { const navContainer = document.getElementById('zodiacNav'); const contentContainer = document.getElementById('horoscopeContent'); // 生成导航按钮 horoscopeData.forEach(sign => { const btn = document.createElement('button'); btn.className = 'zodiac-btn'; btn.innerHTML = `${sign.symbol} ${sign.name}`; btn.style.setProperty('--theme-color', sign.color); // 使用CSS变量传递颜色 btn.dataset.id = sign.id; // 存储星座ID btn.addEventListener('click', function() { // 1. 更新激活状态 document.querySelectorAll('.zodiac-btn.active').forEach(b => b.classList.remove('active')); this.classList.add('active'); // 2. 显示对应星座内容 displayHoroscope(sign, contentContainer); }); navContainer.appendChild(btn); }); // 默认激活并显示第一个星座 if (horoscopeData.length > 0) { navContainer.firstChild.classList.add('active'); displayHoroscope(horoscopeData[0], contentContainer); } } function displayHoroscope(sign, container) { container.innerHTML = ` <div class="sign-header" style="border-left-color: ${sign.color};"> <h3>${sign.symbol} ${sign.name} <span class="date">(${sign.date})</span></h3> <p class="planet">守护星：${sign.planet}</p> </div> <div class="today-fortune"> <h4><i class="icon-sun"></i> 今日运势</h4> <p>${sign.today}</p> </div> <div class="lucky-stats"> <div class="stat"><span class="label">幸运色</span><span class="value" style="color:${sign.color}">${sign.color}</span></div> <div class="stat"><span class="label">幸运数字</span><span class="value">${Math.floor(Math.random()*9)+1}</span></div> <div class="stat"><span class="label">契合星座</span><span class="value">${getCompatibleSign(sign.id)}</span></div> </div> `; // 添加内容显示动画 container.classList.add('content-updated'); setTimeout(() => container.classList.remove('content-updated'), 500); } // 一个简单的契合星座匹配函数（示例） function getCompatibleSign(id) { const compatibleMap = {1: '狮子座', 2: '处女座', 3: '天秤座' /* ... */}; return compatibleMap[id] || '天蝎座'; } // 页面加载完成后初始化 window.addEventListener('DOMContentLoaded', initHoroscope);3.2.3 响应式布局与视觉设计
星座导航在桌面端可以水平排列，在移动端则需要变为垂直排列或可横向滚动的形式。内容区要能自适应宽度。
.horoscope-container { display: flex; flex-direction: row; max-width: 1000px; margin: 0 auto; border-radius: 15px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.2); background: rgba(26, 35, 126, 0.7); } .zodiac-nav { flex: 0 0 250px; background: rgba(0, 0, 0, 0.5); padding: 20px; display: flex; flex-direction: column; gap: 10px; } .zodiac-btn { padding: 15px; border: none; border-radius: 8px; background: transparent; color: #ccc; text-align: left; font-size: 1.1em; cursor: pointer; transition: all 0.3s ease; border-left: 4px solid transparent; } .zodiac-btn:hover { background: rgba(255, 255, 255, 0.1); color: #fff; border-left-color: var(--theme-color); } .zodiac-btn.active { background: rgba(255, 255, 255, 0.15); color: #fff; font-weight: bold; border-left-color: var(--theme-color); box-shadow: inset 3px 0 5px rgba(0,0,0,0.2); } .horoscope-content { flex: 1; padding: 30px; background: rgba(255, 255, 255, 0.05); min-height: 400px; } /* 移动端适配 */ @media (max-width: 768px) { .horoscope-container { flex-direction: column; } .zodiac-nav { flex: none; flex-direction: row; overflow-x: auto; padding: 15px; gap: 8px; } .zodiac-btn { flex-shrink: 0; padding: 10px 15px; border-left: none; border-bottom: 3px solid transparent; } .zodiac-btn.active { border-left: none; border-bottom-color: var(--theme-color); } } .content-updated { animation: fadeInUp 0.5s ease-out; } @keyframes fadeInUp { from { opacity: 0.7; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }注意事项：星座运势内容需要定期更新。在纯静态方案下，你有几种选择：1. 手动修改JS文件中的
today字段，然后重新上传。2. 将数据单独放在一个data.json文件中，通过fetch加载，这样更新数据时只需替换JSON文件。3. 如果有一点后端基础，可以写一个简单的脚本，每天自动从某个可靠的API获取运势并生成静态JSON文件。对于个人小站，方法1或2更简单可控。
4. 关键技术与进阶优化点
4.1 使用CSS变量管理主题色
为了让颜色管理更灵活，我在:root中定义了一系列CSS变量（自定义属性）。
:root { --primary-bg: #0d0d0d; --secondary-bg: #1a237e; --accent-color: #ffd700; --text-primary: #ffffff; --text-secondary: #b0b0b0; --card-bg: rgba(255, 255, 255, 0.1); --border-radius: 10px; --transition-speed: 0.3s; }这样，在修改主题色时，只需改动:root中的变量值，所有使用这些变量的地方都会自动更新，维护起来非常方便。例如，按钮样式可以写成：
.btn-shuffle { background-color: var(--secondary-bg); color: var(--text-primary); border: 1px solid var(--accent-color); border-radius: var(--border-radius); transition: background-color var(--transition-speed); } .btn-shuffle:hover { background-color: var(--accent-color); color: var(--primary-bg); }4.2 利用Flexbox与Grid进行高级布局
除了基本的布局，在一些细节处可以使用CSS Grid来实现更规整的排列。例如，在展示“幸运指数”等多项数据时：
<div class="stats-grid"> <div class="stat-item">幸运指数: ★★★★☆</div> <div class="stat-item">爱情运势: ★★★☆☆</div> <div class="stat-item">事业运势: ★★★★★</div> <div class="stat-item">财运: ★★★★☆</div> </div>.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 15px; margin-top: 20px; } .stat-item { background: var(--card-bg); padding: 15px; border-radius: var(--border-radius); text-align: center; }grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));这行代码非常强大，它会自动根据容器宽度，创建尽可能多的、宽度至少150px的列，并平均分配剩余空间。这样无论在宽屏还是窄屏上，都能有很好的自适应效果。
4.3 使用LocalStorage实现简单状态持久化
虽然不需要后端，但我们仍然可以利用浏览器的localStorage来增强用户体验。例如，记录用户上次抽到的塔罗牌，或者记住用户选择的星座。
// 抽牌后保存记录 function drawAndSaveCard() { // ... 原有的抽牌逻辑 const drawnCard = tarotDeck[randomIndex]; const isReversed = Math.random() > 0.5; // 保存到localStorage const history = JSON.parse(localStorage.getItem('tarotHistory') || '[]'); history.unshift({ // 添加到历史记录开头 cardName: drawnCard.name, isReversed: isReversed, timestamp: new Date().toISOString() }); // 只保留最近10条记录 if (history.length > 10) history.pop(); localStorage.setItem('tarotHistory', JSON.stringify(history)); displayCard(drawnCard, isReversed); } // 页面加载时，可以显示上次抽牌记录或问候语 function loadHistory() { const history = JSON.parse(localStorage.getItem('tarotHistory')); if (history && history.length > 0) { const lastDraw = history[0]; console.log(`上次抽到: ${lastDraw.cardName} ${lastDraw.isReversed ? '(逆位)' : '(正位)'}`); // 可以在页面某个角落显示这个信息 } } window.addEventListener('load', loadHistory);4.4 性能优化与资源加载
图片懒加载：对于星座图标或塔罗牌背面等初始视窗外的图片，可以使用
loading="lazy"属性。<img src="placeholder.jpg">document.addEventListener('DOMContentLoaded', function() { // 所有操作DOM的代码放在这里 document.getElementById('myButton').addEventListener('click', ...); });- 函数未定义：检查函数名是否拼写错误，或者函数是否在调用它的代码之后才定义（对于非函数声明方式）。
- 确保视口设置正确：HTML头部必须有
<meta name="viewport" content="width=device-width, initial-scale=1.0">。 - 使用相对单位：多用
rem,em,%,vw/vh，少用固定的px。1rem通常等于根元素（html）的字体大小，默认为16px，方便整体缩放。 - 触摸目标大小：按钮、链接等可点击区域，在移动端建议最小尺寸为
44px * 44px。 - 在浏览器中模拟测试：Chrome DevTools有设备模拟器，可以快速测试不同屏幕尺寸。
- 将数据（
tarotDeck和horoscopeData）单独提取到一个data.js文件中。// data.js const tarotDeck = [...]; const horoscopeData = [...]; - 在主HTML文件中引入它。
<script src="./js/data.js"></script> <script src="./js/main.js"></script> - 当需要更新运势时，你只需要编辑
data.js文件中的horoscopeData[i].today字段即可。甚至可以写一个简单的文本文件，用脚本定期转换格式后更新data.js。这种方式将数据和逻辑分离，更清晰，也便于非技术人员（比如只负责文案的同事）在指导下进行内容更新。
5.4 移动端样式错乱在手机浏览器上测试时，可能出现布局崩坏、按钮太小点不到等问题。
5.5 如何更新运势内容？这是纯静态站点的核心维护问题。我的建议是：
这个纯前端的塔罗牌与星座运势网站项目，虽然功能不复杂，但几乎涵盖了现代前端开发的核心技能点：语义化HTML、CSS布局与动画、JavaScript DOM操作与事件处理、响应式设计、以及简单的数据管理与状态持久化。它像是一个精美的前端技术“样板间”，你可以基于它，更换主题、增加更复杂的交互（如多张牌阵占卜）、甚至接入第三方API来获取每日更新的运势，把它打造成一个真正有活力的小站。最重要的是，整个过程无需操心服务器，专注于前端本身的美与逻辑，这种纯粹的开发体验，在如今动辄全栈的环境下，反而有一种返璞归真的乐趣。
本文还有配套的精品资源，点击获取
