蓝色警戒现代科技风格UI美化包，svg

我来为您设计一个现代科技风格的蓝色警戒UI美化包,这个设计将包含多种游戏界面元素，采用深蓝色调配合霓虹光效，营造未来科技感。

<!-- 发光效果 -->
<filter id="glow">
  <feGaussianBlur stdDeviation="4" result="coloredBlur"/>
  <feMerge>
    <feMergeNode in="coloredBlur"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<!-- 内发光效果 -->
<filter id="innerGlow">
  <feGaussianBlur stdDeviation="2" result="coloredBlur"/>
  <feComposite in="coloredBlur" in2="SourceAlpha" operator="in" result="innerGlow"/>
  <feFlood flood-color="#00d4ff" flood-opacity="0.5" result="color"/>
  <feComposite in="color" in2="innerGlow" operator="in" result="glow"/>
  <feMerge>
    <feMergeNode in="glow"/>
    <feMergeNode in="SourceGraphic"/>
  </feMerge>
</filter>
<!-- 扫描线效果 -->
<pattern id="scanline" patternUnits="userSpaceOnUse" width="4" height="4">
  <line x1="0" y1="0" x2="4" y2="0" stroke="#00d4ff" stroke-width="0.5" opacity="0.3"/>
</pattern>

<!-- 标题文字 -->
<text x="550" y="50" text-anchor="middle" font-family="Arial, sans-serif" font-size="28" font-weight="bold" fill="#00d4ff" filter="url(#glow)">
  BLUE ALERT - TECH UI PACK
</text>

<!-- 资源标题 -->
<text x="175" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#00d4ff">
  资源状态
</text>
<!-- 能量条 -->
<g transform="translate(30, 50)">
  <rect width="290" height="30" rx="5" fill="#000814" stroke="#00d4ff" stroke-width="1"/>
  <rect x="2" y="2" width="200" height="26" rx="3" fill="url(#blueGradient)" opacity="0.8"/>
  <text x="15" y="20" font-family="Arial, sans-serif" font-size="14" fill="#ffffff">能量</text>
  <text x="280" y="20" text-anchor="end" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff">69%</text>
</g>
<!-- 金属条 -->
<g transform="translate(30, 100)">
  <rect width="290" height="30" rx="5" fill="#000814" stroke="#00d4ff" stroke-width="1"/>
  <rect x="2" y="2" width="150" height="26" rx="3" fill="#666666" opacity="0.8"/>
  <text x="15" y="20" font-family="Arial, sans-serif" font-size="14" fill="#ffffff">金属</text>
  <text x="280" y="20" text-anchor="end" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff">52%</text>
</g>
<!-- 晶体条 -->
<g transform="translate(30, 150)">
  <rect width="290" height="30" rx="5" fill="#000814" stroke="#00d4ff" stroke-width="1"/>
  <rect x="2" y="2" width="230" height="26" rx="3" fill="#ff00ff" opacity="0.8"/>
  <text x="15" y="20" font-family="Arial, sans-serif" font-size="14" fill="#ffffff">晶体</text>
  <text x="280" y="20" text-anchor="end" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff">78%</text>
</g>

<text x="150" y="30" text-anchor="middle" font-family="Arial, sans-serif" font-size="18" fill="#00d4ff">
  控制中心
</text>
<!-- 按钮组 -->
<g transform="translate(30, 60)">
  <!-- 建造按钮 -->
  <rect width="120" height="40" rx="5" fill="url(#blueGradient)" filter="url(#glow)"/>
  <text x="60" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#ffffff">建造</text>
  <!-- 升级按钮 -->
  <rect x="150" y="0" width="120" height="40" rx="5" fill="#333366" stroke="#00d4ff" stroke-width="1"/>
  <text x="210" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff">升级</text>
</g>
<!-- 第二行按钮 -->
<g transform="translate(30, 120)">
  <!-- 防御按钮 -->
  <rect width="120" height="40" rx="5" fill="#333366" stroke="#00d4ff" stroke-width="1"/>
  <text x="60" y="25" text-anchor="middle" font-family="Arial, sans-serif" font-size="14" fill="#00d4ff">防御</text>
  <!-- 攻击按钮 -->
  <

蓝色警戒现代科技风格UI美化包，svg

转载请说明出处
蓝警之家 » 蓝色警戒现代科技风格UI美化包，svg

蓝警之家

分享到：

蓝警之家

发表评论

蓝色警戒主题网站！