蓝色警戒现代科技风格UI美化包，一、核心设计理念

主题色：深空蓝（#0A1929） + 电光蓝（#00D4FF） + 霓虹紫（#9B59B6）
材质：亚克力玻璃质感 + 金属蚀刻纹理 + 动态光效
风格：赛博朋克未来感 + 军事科技精密感

UI组件设计

主界面框架

组件	设计方案
背景	深空星云动态背景，带网格线扫描效果
菜单按钮	六边形按钮设计，悬停时展开光晕环
状态栏	半透明玻璃面板，显示实时资源数据（带脉冲动画）

游戏内界面

组件	设计方案
小地图	圆角矩形边框，带雷达扫描动画，敌我单位用不同光效标记
单位面板	深色玻璃态背景，单位图标采用3D立体模型，悬停显示全息投影效果
技能按钮	圆形按钮，技能图标置于发光圆环中，CD时显示倒计时光圈
资源显示	数字采用7段数码管字体，资源图标带呼吸灯效果

交互特效

按钮点击：涟漪扩散 + 能量粒子飞溅
单位选中：地面生成动态光圈，单位边缘发光
技能释放：环形光波扩散 + 矩阵雨特效

资源文件清单

**背景资源**
   - `bg_mainmenu.jpg` - 星云动态背景（1920x1080）
   - `bg_ingame.jpg` - 战场网格背景（带扫描线）
2. **UI元素**
   - `btn_base.psd` - 按钮基础模板（含图层样式）
   - `panel_glass.png` - 玻璃态面板贴图
   - `icon_resource.png` - 资源图标（金属质感）
3. **特效素材**
   - `glow_effect.psd` - 发光效果笔刷
   - `particle_energy.psd` - 能量粒子素材
   - `scanline_animated.gif` - 扫描线动画
4. **字体文件**
   - `font_digital.ttf` - 数码管字体（资源显示）
   - `font_military.otf` - 军事科技字体（标题）

实现技术方案

界面布局优化

/* 玻璃态面板样式 */
.glass-panel {
  background: rgba(10, 25, 41, 0.7);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 212, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 212, 255, 0.1);
}
/* 动态光效边框 */
.glow-border {
  position: relative;
  overflow: hidden;
}
.glow-border::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #00D4FF, #9B59B6);
  z-index: -1;
  filter: blur(5px);
  opacity: 0.7;
  animation: rotate 3s linear infinite;
}

动态效果实现

// 单位选中光圈动画
function selectUnit(unit) {
  const circle = document.createElement('div');
  circle.className = 'selection-circle';
  circle.style.animation = 'pulse 1s ease-out';
  unit.appendChild(circle);
}
// 资源数值动画
function updateResource(type, value) {
  const element = document.getElementById(`res-${type}`);
  element.style.transition = 'all 0.3s';
  element.style.transform = 'scale(1.2)';
  element.textContent = value;
  setTimeout(() => {
    element.style.transform = 'scale(1)';
  }, 300);
}