个人引导页视觉风格-萌系 + 渐变背景的html源码

韩云溪

• 视觉风格 – 萌系 + 渐变背景
  
  
  • 背景改为粉紫渐变（#fdf2f8 → #e9d5ff → #c084fc），低饱和度营造温柔梦幻感
  • 添加了星星、小花等卡通装饰元素（使用 SVG 内嵌，无需额外图片）
  • 所有元素使用大圆角（卡片 24px、按钮 50px）+ 柔和阴影，视觉更圆润
  • 增加彩虹分割线，强化二次元萌系调性
    
  
  
• 核心 UI – 玻璃拟态
  
  
  • 卡片使用 background: rgba(255, 255, 255, 0.7) 半透明背景
  • 添加 backdrop-filter: blur(12px) 毛玻璃模糊效果
  • 卡片添加轻微边框增强层次感
  • 文字使用高对比度保证可读性（深色文字在半透背景上）
    
  
  
• 交互优化
  
  
  • 按钮使用粉紫渐变高饱和色彩，突出交互性
  • 按钮和头像添加萌系阴影效果
  • 所有圆角元素统一视觉风格，增强整体一致性
    
  
  

下载地址：https://pan.quark.cn/s/cfcd4f219772#/list/share

year1970

感谢分享