超炫酷单卡片式个人主页 | 暗黑霓虹风格（附完整源码）

在个性化展示日益重要的今天，一个视觉炸裂、交互丰富的个人主页，能瞬间抓住访问者的眼球。本次分享的单卡片式暗黑霓虹个人主页，融合赛博朋克美学与丝滑交互动画，支持 QQ 头像接入、旗下站点展示，纯前端实现，部署即用！

效果预览

• 整体风格：暗黑底色搭配粉蓝紫霓虹光效，毛玻璃质感 + 粒子动态背景，科技感拉满
• 核心交互：卡片悬浮上浮、头像旋转缩放、技能条渐入、站点卡片流光扫过、鼠标跟随光效
• 响应式适配：完美兼容移动端、平板、桌面端，布局自动调整

核心特性

1. 视觉设计亮点
   • 霓虹渐变边框与发光文字，打造赛博朋克氛围
   • 动态粒子背景，支持鼠标悬浮吸附、点击生成新粒子
   • 毛玻璃卡片叠加流光特效，层次分明
2. 交互动画大全
   • 卡片悬浮上浮 + 放大，增强立体感
   • 社交图标呼吸闪烁，鼠标悬停暂停并放大
   • 技能条加载渐入动画，按比例填充进度
   • 站点卡片流光扫过 + 图标 360° 旋转
   • 鼠标跟随光效，移动速度越快光效越大
   • 元素滚动入场渐入，按顺序展示内容
3. 实用功能模块
   • QQ 头像自动接入（支持高清尺寸）
   • 个人信息、技能展示、旗下站点、社交链接一体化布局
   • 下载简历按钮带脉冲光效，引导用户操作

完整源码

部署教程

1. 复制源码：将上述完整代码复制，保存为 index.html 文件
2. 个性化修改
   • 替换 QQ 号：修改头像 src 中的 nk=273841095 为你的 QQ 号
   • 更新个人信息：修改姓名、职业、简介、技能百分比等内容
   • 调整旗下站点：修改站点名称、描述、图标和链接
   • 更换社交链接：替换社交图标的 href 为你的账号地址
3. 上传部署：将 index.html 上传至任意静态托管平台（如 GitHub Pages、Netlify、Vercel）或自己的服务器，访问即可

这个个人主页模板兼顾了视觉效果与交互体验，代码结构清晰，易于二次开发。你可以根据自己的喜好调整配色、动画速度、模块布局，打造专属的个性化主页。