夜之向日葵主题演示¶

欢迎来到夜之向日葵主题的演示页面！这里展示了主题的各种特色效果和组件。

🌻 向日葵主题特色¶

色彩搭配¶

• 主色调: 深橘色 (#ff8c00) - 向日葵花瓣
• 辅助色: 亮橘色 (#ff6b35) - 向日葵花心
• 强调色: 金黄色 (#ffd700) - 向日葵花蕊
• 夜晚色: 深蓝色 (#1a1a2e) - 夜空

设计元素¶

• 🌻 向日葵装饰元素
• 🌙 夜晚装饰元素
• ✨ 星光背景效果
• 🎨 渐变色彩搭配

🎯 组件展示¶

向日葵按钮¶

点击我

向日葵徽章¶

新功能 热门 推荐

向日葵卡片组¶

📝 文本样式¶

标题样式¶

所有标题都采用了向日葵主题的色彩，并配有装饰元素。

引用块¶

这是一个引用块的示例，展示了向日葵主题的引用样式。引用块具有特殊的背景和边框效果。

代码块¶

def sunflower_theme():
    """夜之向日葵主题函数"""
    primary_color = "#ff8c00"
    secondary_color = "#ff6b35"
    accent_color = "#ffd700"
    return "美丽的向日葵主题"

表格样式¶

🎨 特殊效果¶

工具提示¶

悬停查看工具提示

加载动画¶

进度条¶

🌙 夜晚模式¶

主题支持自动切换夜晚模式，在夜晚模式下：

• 背景变为深蓝色夜空
• 文字颜色自动调整
• 装饰元素更加突出
• 保持向日葵主题色彩

📱 响应式设计¶

主题完全响应式，支持：

• 桌面端完整功能
• 平板端优化布局
• 手机端简化界面
• 触摸友好的交互

🎯 交互效果¶

悬停效果¶

• 卡片悬停时会有上浮和缩放效果
• 按钮悬停时会有波纹动画
• 链接悬停时会有下划线动画

滚动效果¶

• 页面滚动时显示进度条
• 元素进入视口时会有淡入动画
• 平滑的页面切换效果

键盘快捷键¶

• Ctrl/Cmd + K: 聚焦搜索框
• ESC: 关闭搜索框

🌟 主题特色¶

1. 向日葵元素: 大量使用向日葵emoji和装饰
2. 夜晚氛围: 深色背景营造夜晚感觉
3. 现代设计: 圆角、阴影、渐变等现代元素
4. 流畅动画: 丰富的CSS动画和过渡效果
5. 无障碍: 支持键盘导航和屏幕阅读器

🎨 自定义¶

主题提供了丰富的CSS变量，可以轻松自定义：

:root {
  --primary-color: #ff8c00;
  --secondary-color: #ff6b35;
  --accent-color: #ffd700;
  --night-color: #1a1a2e;
  --dark-bg: #0f0f23;
}

夜之向日葵，此曲为一切不合时宜者而作。 🌻🌙