Evan's Domain Name 页面上线！动态粒子背景 + 明暗主题切换，域名卡片设计超吸睛

源码介绍

本文分享的是一款核心的单页网站，整体设计简洁现代，兼具视觉美感与实用功能，适合用于个人域名收藏展示、导航链接聚合等场景。兼具展示功能与视觉美感的域名展示页面，核心优势在于简洁实用的信息架构、流畅的动态视觉效果和贴心的主题切换功能。其代码结构清晰，易于理解和二次开发，适合个人域名爱好者用于展示自己的域名收藏，也可作为轻量导航页使用。无论是技术实现还是用户体验，都体现了 “简约而不简单” 的设计理念。喜欢的用欢迎来到腾轩网下载体验吧！

源码截图

版本特点

核心功能

域名与链接展示

采用卡片式布局分类展示域名（如YIRI.ORG、ZUN.IM 等）和关联链接（如导航页、米表页），每个卡片包含名称、描述及跳转链接，信息清晰且便于访问。

支持响应式设计，在电脑、手机等不同设备上均能自动调整布局，保证展示效果一致。

主题切换功能

内置浅色 / 深色两种主题模式，通过页面右上角的「?」按钮可一键切换，满足不同用户的视觉偏好。

主题状态会通过localStorage保存，刷新页面后仍能保持用户上次选择的模式。

动态背景效果

页面背景通过 Canvas 绘制动态粒子效果，粒子会随机移动并在距离较近时自动连线，营造出轻盈灵动的视觉氛围。

粒子颜色会随主题模式自动切换（浅色主题为深色粒子，深色主题为浅色粒子），保持整体风格统一。

特色亮点

视觉设计精致

采用简约美学风格，卡片式布局搭配细微阴影和 hover 动效（卡片上浮、边框变色），增强交互体验的同时避免过度设计。

色彩搭配简洁，主题切换时不仅调整背景与文字色，还同步更新粒子、边框等细节颜色，实现整体风格协调。

技术实现轻巧

纯 HTML、CSS、原生 JavaScript 构建，无外部依赖，加载速度快，易于部署和修改。

Canvas 粒子动画采用性能优化的实现方式，通过控制粒子数量（随屏幕尺寸动态调整）减少资源占用，保证页面流畅运行。

用户体验友好

响应式布局适配各种屏幕尺寸，移动端自动调整卡片排列方式，确保浏览舒适。

主题切换操作直观，状态保存功能提升用户连贯性体验，细节设计（如卡片 hover 反馈）增强交互感。