概述

这是一个专为 WordPress 博客设计的自定义html导航栏组件，借鉴于腾飞博客首页导航条，可能有些许BUG，未适配暗色主题，有能力者可二开，导航条具有现代化的 UI 设计和流畅的动画效果。导航栏采用渐变色彩和圆角设计，主标题区域使用黑猫图标作为品牌标识，并配有跳动的爱心图标作为特色功能按钮。整个导航栏支持响应式设计，在移动设备上也能良好展示。

功能特点

1. 黑猫博客品牌标识：主标题区域展示博客名称和图标
2. 动态爱心按钮：带有呼吸动画的爱心图标，增强视觉吸引力
3. 响应式设计：自动适应不同屏幕尺寸，在移动设备上表现良好
4. 平滑过渡效果：导航项悬停时的微动画，提升用户体验
5. 自定义配置：支持在 WordPress 后台自定义导航链接和文本

使用方法

1. 安装方式：
   • 将提供的代码复制到 WordPress 小工具的自定义HTML中
   • 或创建一个自定义插件，将代码整合到插件中
2. 配置选项：
   • 修改主标题文本和图标 URL
   • 调整导航链接的文本和目标地址
   • 通过 CSS 变量自定义颜色方案和动画效果
3. 代码结构：
   • CSS 部分：定义导航栏的样式和动画效果
   • HTML 部分：构建导航栏的结构和内容
   • JavaScript 部分：实现响应式布局和交互逻辑

代码实现亮点

1. 现代化 UI 设计：
   • 使用渐变色彩和圆角设计营造层次感
   • 精心设计的悬停效果增强交互体验
   • 跳动的爱心图标增加视觉趣味性
2. 响应式优化：
   • 在小屏幕设备上自动调整布局
   • 导航项会根据空间自动排列，避免溢出
3. 无障碍设计：
   • 所有图标和按钮都添加了适当的 alt 文本和 aria 标签
   • 交互元素有明确的视觉反馈

以下是完整的代码实现：