前端实战：运用 HTML、CSS 和 JavaScript 技术，打造一个宇宙风格的个人空间站网页_前端网页设计

一、引言

在当今数字化的时代，拥有一个属于自己的个人空间网页是一件非常有意义的事情。本文将详细介绍如何运用 HTML、CSS 和 JavaScript 技术，构建一个类似宇宙的个人空间站网页。

二、项目概述

这个个人空间站网页由首页、个人中心、作品展示和个人博客四个核心页面组成。整体设计以宇宙星空为主题，融入星球、星星和流星等元素，营造出神秘而奇幻的氛围。用户可以通过点击首页的星球图标，轻松导航至不同页面，开启探索之旅。

项目主要页面介绍：

1. 首页：以太阳系模型为背景，通过点击星球可以跳转到不同的页面，给用户带来独特的交互体验。
2. 个人中心：展示个人信息、专业技能、博客文章和作业等内容，方便用户了解个人的基本情况和学习成果。
3. 作品展示：展示自己的项目作品，包括项目预览图、技术栈和详情链接，让用户对作品有更直观的认识。
4. 个人博客：嵌入自己在 CSDN 的博客页面，方便用户查看自己的技术文章。

三、技术选型

1. HTML：作为网页的骨架，负责搭建页面的基本结构。
2. CSS：用于设计网页的样式，包括背景、动画效果、布局等，赋予页面独特的视觉风格。
3. JavaScript：实现网页的交互功能，如导航栏的滚动效果、移动端菜单的切换、星星和星球的动态生成等。
4. Tailwind CSS：一个实用类优先的 CSS 框架，帮助我们快速搭建页面样式，提高开发效率。

四、代码实现

1. HTML 结构搭建

每个页面都有相似的 HTML 结构，主要包括头部导航栏、主体内容区域和底部交互提示（部分页面有）。以下是导航栏的代码示例：

这段代码实现了一个响应式导航栏，在移动端会显示菜单切换按钮，方便用户操作。

2. CSS 样式设计

CSS 部分是实现页面视觉效果的关键，通过定义背景、动画和布局样式，营造出宇宙星空的氛围。以下是一些关键的 CSS 代码：

body { background: linear-gradient(135deg, #0a0f23 0%, #1a1f3a 100%); position: relative; overflow-x: hidden; color: #e2e8f0; min-height: 100vh; font-family: \'Inter\', sans-serif;}.star { position: absolute; background-color: white; border-radius: 50%; animation: twinkle 3s infinite ease-in-out;}@keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; }}.planet { position: absolute; border-radius: 50%; animation: float 20s infinite linear; box-shadow: 0 0 30px rgba(113, 162, 202, 0.5);}@keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-30px) rotate(360deg); }}

上述代码定义了背景颜色、星星闪烁动画和星球漂浮动画，为页面增添了动态和神秘的氛围。

3. JavaScript 交互功能

JavaScript 负责实现网页的交互效果，如导航栏的滚动效果、移动端菜单的切换等。以下是导航栏滚动效果的代码示例：

const navbar = document.getElementById(\'navbar\');const backToTopBtn = document.getElementById(\'back-to-top\');window.addEventListener(\'scroll\', () => { if (window.scrollY > 100) { navbar.classList.add(\'shadow-lg\'); navbar.style.backgroundColor = \'rgba(31, 41, 55, 0.95)\'; navbar.style.borderBottomColor = \'rgba(255, 255, 255, 0.1)\'; backToTopBtn.classList.remove(\'opacity-0\', \'invisible\'); backToTopBtn.classList.add(\'opacity-100\', \'visible\'); } else { navbar.classList.remove(\'shadow-lg\'); navbar.style.backgroundColor = \'rgba(31, 41, 55, 0.9)\'; navbar.style.borderBottomColor = \'rgba(255, 255, 255, 0.1)\'; backToTopBtn.classList.add(\'opacity-0\', \'invisible\'); backToTopBtn.classList.remove(\'opacity-100\', \'visible\'); }});

这段代码实现了导航栏在滚动时的样式变化，以及返回顶部按钮的显示与隐藏，提升了用户体验。

四、各页面搭建过程

（一）首页开发

首页的核心亮点是太阳系模型，通过 CSS 和 JavaScript 创建星球元素，并为其添加动画效果和点击事件。通过点击星球，可以跳转到对应的页面。同时，页面会动态生成星星背景，营造出星空的氛围。代码示例如下：

  @layer utilities { .content-auto { content-visibility: auto; } .perspective-1000 { perspective: 1000px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .planet-container { position: absolute; transform-style: preserve-3d; transition: all 0.5s ease; will-change: transform; display: flex; flex-direction: column; align-items: center; } .planet { position: relative; border-radius: 50%; cursor: pointer; transform-style: preserve-3d; will-change: transform; aspect-ratio: 1/1; overflow: hidden; box-shadow: 0 0 60px rgba(255, 255, 255, 0.1); } .planet::before { content: \'\'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%,  rgba(255, 255, 255, 0.8) 0%,  rgba(255, 255, 255, 0.5) 20%,  transparent 70%); opacity: 0.6; z-index: 2; } .planet::after { content: \'\'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset -20px -20px 40px rgba(0, 0, 0, 0.6); z-index: 3; } .planet:hover { filter: brightness(1.2); box-shadow: 0 0 80px currentColor; transform: scale(1.05) translateZ(10px); } .planet-texture { position: absolute; width: 200%; height: 200%; border-radius: 50%; background-size: 50% 50%; background-repeat: no-repeat; transform: translate(-50%, -50%) translateZ(1px); } .orbit-path { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; transform-style: preserve-3d; } .star { position: absolute; background-color: white; border-radius: 50%; animation: twinkle 2s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes rotateTexture { from { transform: translate(-50%, -50%) translateZ(1px) rotateY(0deg); } to { transform: translate(-50%, -50%) translateZ(1px) rotateY(360deg); } } /* 星球纹理样式 */ .mercury-texture, .venus-texture, .earth-texture, .mars-texture { background-blend-mode: overlay, overlay, normal; } .planet-shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%); z-index: 4; } .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .glass-effect { backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.7); } /* 动画效果 */ @keyframes slideInFromTop { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideInFromBottom { 0% { transform: translate(-50%, 150px); opacity: 0; } /* 修改为150px */ 100% { transform: translate(-50%, 0); opacity: 1; } } .animate-slide-in { animation: slideInFromTop 0.8s ease-out forwards; } .animate-slide-in-from-bottom { animation: slideInFromBottom 0.8s ease-out forwards; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes bounce { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -55%); } }  .world-text { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } /* 星球名称样式 - */ .planet-name { position: absolute; bottom: -22px;  left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 600; color: white; text-shadow: 0 0 8px rgba(0,0,0,0.7); white-space: nowrap; transition: all 0.3s ease; opacity: 0.8; z-index: 45; } .planet-container:hover .planet-name { opacity: 1; transform: translateX(-50%) scale(1.1); color: #a5f3fc; text-shadow: 0 0 12px rgba(125, 211, 252, 0.8); } /* 深空星云背景 */ .space-bg { background: radial-gradient(ellipse at top, #0b0d17 0%, #1a1f3a 35%, #0a0f23 70%); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } /* 背景星球元素 */ .bg-planet { position: fixed; border-radius: 50%; animation: float 20s infinite linear; box-shadow: 0 0 30px rgba(113, 162, 202, 0.5); z-index: -1; } .bg-planet::after { content: \'\'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, transparent 70%); opacity: 0.3; } /* 行星环 */ .bg-planet-ring { position: fixed; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transform: rotateX(70deg); animation: rotateRing 25s infinite linear; z-index: -1; } /* 流星效果 */ .shooting-star { position: fixed; height: 2px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); animation: shootingStar 5s infinite linear; opacity: 0; z-index: -1; } /* 星球动画 */ @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-30px) rotate(360deg); } } @keyframes rotateRing { 0% { transform: rotateX(70deg) rotateZ(0deg); } 100% { transform: rotateX(70deg) rotateZ(360deg); } } @keyframes shootingStar { 0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); } 5% { opacity: 1; } 100% { opacity: 0; transform: translateX(300px) translateY(150px) rotate(30deg); } } .nav-active { color: #3B82F6 !important; font-weight: 600 !important; } } 

 CSS部分

  @layer utilities { .content-auto { content-visibility: auto; } .perspective-1000 { perspective: 1000px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; } .planet-container { position: absolute; transform-style: preserve-3d; transition: all 0.5s ease; will-change: transform; display: flex; flex-direction: column; align-items: center; } .planet { position: relative; border-radius: 50%; cursor: pointer; transform-style: preserve-3d; will-change: transform; aspect-ratio: 1/1; overflow: hidden; box-shadow: 0 0 60px rgba(255, 255, 255, 0.1); } .planet::before { content: \'\'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%,  rgba(255, 255, 255, 0.8) 0%,  rgba(255, 255, 255, 0.5) 20%,  transparent 70%); opacity: 0.6; z-index: 2; } .planet::after { content: \'\'; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; box-shadow: inset -20px -20px 40px rgba(0, 0, 0, 0.6); z-index: 3; } .planet:hover { filter: brightness(1.2); box-shadow: 0 0 80px currentColor; transform: scale(1.05) translateZ(10px); } .planet-texture { position: absolute; width: 200%; height: 200%; border-radius: 50%; background-size: 50% 50%; background-repeat: no-repeat; transform: translate(-50%, -50%) translateZ(1px); } .orbit-path { position: absolute; border: 1px dashed rgba(255, 255, 255, 0.3); border-radius: 50%; transform-style: preserve-3d; } .star { position: absolute; background-color: white; border-radius: 50%; animation: twinkle 2s infinite ease-in-out; } @keyframes twinkle { 0%, 100% { opacity: 0.5; } 50% { opacity: 1; } } @keyframes rotateTexture { from { transform: translate(-50%, -50%) translateZ(1px) rotateY(0deg); } to { transform: translate(-50%, -50%) translateZ(1px) rotateY(360deg); } } /* 星球纹理样式 */ .mercury-texture, .venus-texture, .earth-texture, .mars-texture { background-blend-mode: overlay, overlay, normal; } .planet-shine { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.3) 40%, transparent 70%); z-index: 4; } .text-shadow { text-shadow: 0 2px 4px rgba(0,0,0,0.1); } .hover-scale { transition: transform 0.3s ease; } .hover-scale:hover { transform: scale(1.05); } .glass-effect { backdrop-filter: blur(8px); background-color: rgba(255, 255, 255, 0.7); } /* 动画效果 */ @keyframes slideInFromTop { 0% { transform: translateY(-100px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } @keyframes slideInFromBottom { 0% { transform: translate(-50%, 150px); opacity: 0; } /* 修改为150px */ 100% { transform: translate(-50%, 0); opacity: 1; } } .animate-slide-in { animation: slideInFromTop 0.8s ease-out forwards; } .animate-slide-in-from-bottom { animation: slideInFromBottom 0.8s ease-out forwards; } .delay-100 { animation-delay: 0.1s; } .delay-200 { animation-delay: 0.2s; } .delay-300 { animation-delay: 0.3s; } @keyframes pulse { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.05); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes bounce { 0%, 100% { transform: translate(-50%, -50%); } 50% { transform: translate(-50%, -55%); } }  .world-text { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; color: rgba(255, 255, 255, 0.9); text-shadow: 0 0 10px rgba(255, 255, 255, 0.3); } /* 星球名称样式 - */ .planet-name { position: absolute; bottom: -22px;  left: 50%; transform: translateX(-50%); font-size: 14px; font-weight: 600; color: white; text-shadow: 0 0 8px rgba(0,0,0,0.7); white-space: nowrap; transition: all 0.3s ease; opacity: 0.8; z-index: 45; } .planet-container:hover .planet-name { opacity: 1; transform: translateX(-50%) scale(1.1); color: #a5f3fc; text-shadow: 0 0 12px rgba(125, 211, 252, 0.8); } /* 深空星云背景 */ .space-bg { background: radial-gradient(ellipse at top, #0b0d17 0%, #1a1f3a 35%, #0a0f23 70%); position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: -2; } /* 背景星球元素 */ .bg-planet { position: fixed; border-radius: 50%; animation: float 20s infinite linear; box-shadow: 0 0 30px rgba(113, 162, 202, 0.5); z-index: -1; } .bg-planet::after { content: \'\'; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #ffffff, transparent 70%); opacity: 0.3; } /* 行星环 */ .bg-planet-ring { position: fixed; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.3); transform: rotateX(70deg); animation: rotateRing 25s infinite linear; z-index: -1; } /* 流星效果 */ .shooting-star { position: fixed; height: 2px; background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 50%, rgba(255,255,255,0) 100%); animation: shootingStar 5s infinite linear; opacity: 0; z-index: -1; } /* 星球动画 */ @keyframes float { 0% { transform: translateY(0) rotate(0deg); } 100% { transform: translateY(-30px) rotate(360deg); } } @keyframes rotateRing { 0% { transform: rotateX(70deg) rotateZ(0deg); } 100% { transform: rotateX(70deg) rotateZ(360deg); } } @keyframes shootingStar { 0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); } 5% { opacity: 1; } 100% { opacity: 0; transform: translateX(300px) translateY(150px) rotate(30deg); } } .nav-active { color: #3B82F6 !important; font-weight: 600 !important; } } 

Javascript部分

// 生成星星背景 function generateStars() { const starsContainer = document.getElementById(\'stars\'); const count = 300; for (let i = 0; i < count; i++) { const star = document.createElement(\'div\'); star.className = \'star\'; const x = Math.random() * 100; const y = Math.random() * 100; const size = Math.random() * 3 + 1; const delay = Math.random() * 5; star.style.left = `${x}%`; star.style.top = `${y}%`; star.style.width = `${size}px`; star.style.height = `${size}px`; star.style.animationDelay = `${delay}s`; starsContainer.appendChild(star); } } // 创建背景星球元素 function createBgPlanets() { const container = document.getElementById(\'planet-bg\'); // 创建大型背景星球 const planet1 = document.createElement(\'div\'); planet1.className = \'bg-planet\'; planet1.style.background = \'radial-gradient(circle at 30% 30%, #71a2ca, #4a6d8c)\'; planet1.style.width = \'180px\'; planet1.style.height = \'180px\'; planet1.style.top = \'15%\'; planet1.style.right = \'10%\'; planet1.style.animationDuration = \'80s\'; planet1.style.filter = \'blur(2px)\'; planet1.style.zIndex = \'-1\'; container.appendChild(planet1); // 添加行星环 const ring1 = document.createElement(\'div\'); ring1.className = \'bg-planet-ring\'; ring1.style.width = \'240px\'; ring1.style.height = \'50px\'; ring1.style.top = \'calc(15% + 90px)\'; ring1.style.right = \'calc(10% - 30px)\'; ring1.style.zIndex = \'-1\'; container.appendChild(ring1); // 创建中型背景星球 const planet2 = document.createElement(\'div\'); planet2.className = \'bg-planet\'; planet2.style.background = \'radial-gradient(circle at 30% 30%, #a27dcb, #6d4f8f)\'; planet2.style.width = \'120px\'; planet2.style.height = \'120px\'; planet2.style.top = \'30%\'; planet2.style.left = \'5%\'; planet2.style.animationDuration = \'60s\'; planet2.style.animationDirection = \'reverse\'; planet2.style.filter = \'blur(1.5px)\'; planet2.style.zIndex = \'-1\'; container.appendChild(planet2); // 创建小型背景星球 const planet3 = document.createElement(\'div\'); planet3.className = \'bg-planet\'; planet3.style.background = \'radial-gradient(circle at 30% 30%, #f7b267, #d98c4a)\'; planet3.style.width = \'80px\'; planet3.style.height = \'80px\'; planet3.style.bottom = \'20%\'; planet3.style.left = \'15%\'; planet3.style.animationDuration = \'40s\'; planet3.style.filter = \'blur(1px)\'; planet3.style.zIndex = \'-1\'; container.appendChild(planet3); // 创建流星 createShootingStars(); } // 创建流星效果 function createShootingStars() { const container = document.getElementById(\'planet-bg\'); // 创建多个流星 for (let i = 0; i  { if (window.scrollY > 100) { navbar.classList.add(\'shadow-lg\'); navbar.style.backgroundColor = \'rgba(31, 41, 55, 0.95)\'; navbar.style.borderBottomColor = \'rgba(255, 255, 255, 0.1)\'; } else { navbar.classList.remove(\'shadow-lg\'); navbar.style.backgroundColor = \'rgba(31, 41, 55, 0.9)\'; navbar.style.borderBottomColor = \'rgba(255, 255, 255, 0.1)\'; } // 滚动时隐藏提示 const prompt = document.getElementById(\'interaction-prompt\'); if (window.scrollY > 50) { prompt.style.opacity = \'0\'; prompt.style.pointerEvents = \'none\'; } else { prompt.style.opacity = \'1\'; prompt.style.pointerEvents = \'all\'; } }); // 移动端菜单切换 const menuToggle = document.getElementById(\'menu-toggle\'); const mobileMenu = document.getElementById(\'mobile-menu\'); menuToggle.addEventListener(\'click\', () => { mobileMenu.classList.toggle(\'hidden\'); menuToggle.innerHTML = mobileMenu.classList.contains(\'hidden\')  ? \'\'  : \'\'; }); // 页面加载完成后执行 document.addEventListener(\'DOMContentLoaded\', () => { generateStars(); createBgPlanets(); document.addEventListener(\'mousemove\', handleMouseMove); // 元素动画触发 const welcomeMessage = document.getElementById(\'welcome-message\'); const interactionPrompt = document.getElementById(\'interaction-prompt\'); const observer = new IntersectionObserver((entries) => { entries.forEach(entry => {  if (entry.isIntersecting) { entry.target.style.opacity = 1; entry.target.style.transform = \'translateY(0)\'; observer.unobserve(entry.target);  } }); }, { threshold: 0.1 }); if (welcomeMessage) observer.observe(welcomeMessage); if (interactionPrompt) observer.observe(interactionPrompt); // 添加星球点击事件 document.querySelectorAll(\'.planet-container\').forEach(planet => { planet.addEventListener(\'click\', function() {  const url = this.getAttribute(\'data-url\');  if (url) { window.location.href = url;  } }); }); });

（二）个人中心页面开发

个人中心页面采用侧边栏和主内容区的布局方式，通过 JavaScript 实现了侧边栏的切换功能，当点击侧边栏的菜单项时，主内容区会显示相应的内容。代码示例如下：

 
 
 个人中心  
  
  
 
  
 
  个人简介 
 
  我的博客 
 
  我的作业 
 
  联系我 
  
 
 
  
  
    
  
 
 
    
  
 
 
姓名
 
专业
 
 
  
 
 
    
基本信息
 
 
   
 
 
  
    
 
  
关于我
 
 
  
  
    
 
  
专业技能
 
 
  
  
 
  
  
 
  
我的博客
 
 
  
  
  查看更多博客   
  
 
  
  
 
  
我的作业
 
 
  
  
 
  
  
  
 
 
    
发送消息
 
     
 
  
 
  
联系方式
 
 
  
 
  
 
 
 
 

（三）作品展示页面开发

作品展示页面使用卡片的形式展示项目作品，通过 CSS 的hover效果实现了图片的缩放动画。每个卡片包含项目预览图、项目名称、技术栈和详情链接，方便用户查看项目详情。代码示例如下：

 
 
 作品展示  
 
  
 
   
 
  
项目名称
  
项目描述
  
   
   查看详情    
 
  
 

（四）个人博客页面开发

个人博客页面使用iframe嵌入了自己在 CSDN 的博客页面，并实现了缩放控制功能。通过 JavaScript 监听窗口大小的变化，自动调整博客页面的缩放比例，以适应不同的屏幕尺寸。代码示例如下：

 
 
 个人博客  
  
  
 

Javascript部分

const blogIframe = document.getElementById(\'blog-iframe\');let zoomLevel = 0.8;function applyZoom() { blogIframe.style.transform = `scale(${zoomLevel})`; blogIframe.style.width = `${100 / zoomLevel}%`; blogIframe.style.height = `${100 / zoomLevel}%`;}// 初始缩放applyZoom();// 缩放按钮事件document.getElementById(\'zoom-in\')?.addEventListener(\'click\', () => { zoomLevel = Math.min(zoomLevel + 0.1, 1.5); applyZoom();});document.getElementById(\'zoom-out\')?.addEventListener(\'click\', () => { zoomLevel = Math.max(zoomLevel - 0.1, 0.5); applyZoom();});document.getElementById(\'zoom-reset\')?.addEventListener(\'click\', () => { zoomLevel = 0.8; applyZoom();});// 响应式调整function handleResize() { if (window.innerWidth < 768) { zoomLevel = 0.6; } else { zoomLevel = 0.8; } applyZoom();}// 初始调整handleResize();// 窗口大小改变时重新调整window.addEventListener(\'resize\', handleResize);

五、总结

通过上述代码，我们成功运用 HTML、CSS 和 JavaScript 技术，结合 Tailwind CSS 框架，打造了一个类似宇宙的个人空间网页。这个网页不仅具有独特的视觉效果，还具备丰富的交互功能，为用户提供了良好的浏览体验。希望本文能为你提供一些灵感和参考，让你也能打造出属于自己的个人空间站。