当前位置：首页 > CSS

csgo网页制作css

2026-03-12 13:48:14CSS

CSGO 网页制作 CSS 设计要点

颜色与主题
采用 CSGO 经典的黑、橙、灰配色方案，突出竞技感。背景可使用深色（如 #1a1a1a），搭配橙色（如 #f7931a）作为高亮色。字体选择无衬线字体（如 Arial 或 Roboto），确保可读性。

body {
  background-color: #1a1a1a;
  color: #ffffff;
  font-family: 'Roboto', sans-serif;
}

导航栏设计
导航栏应模仿游戏内菜单风格，使用渐变背景和边框阴影。按钮悬停时添加橙色高亮效果。

csgo网页制作css

.navbar {
  background: linear-gradient(to right, #2a2a2a, #1a1a1a);
  border-bottom: 2px solid #f7931a;
  padding: 10px 0;
}

.nav-button:hover {
  color: #f7931a;
  border-bottom: 2px solid #f7931a;
}

武器/地图展示区
使用网格布局展示武器或地图，每个项目添加悬停放大效果和阴影。图片容器需保持比例一致。

.weapon-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 15px;
}

.weapon-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(247, 147, 26, 0.5);
}

数据统计表格
表格采用深色背景，表头使用橙色分隔线，隔行变色提升可读性。

csgo网页制作css

.stats-table {
  width: 100%;
  border-collapse: collapse;
}

.stats-table th {
  border-bottom: 2px solid #f7931a;
  padding: 10px;
}

.stats-table tr:nth-child(even) {
  background-color: #2a2a2a;
}

响应式设计
通过媒体查询适配移动设备，缩小导航栏和调整网格列数。

@media (max-width: 768px) {
  .navbar { padding: 5px 0; }
  .weapon-grid { grid-template-columns: repeat(2, 1fr); }
}

动画效果
为关键操作（如按钮点击、页面加载）添加简短动画，增强交互感。

@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.highlight-animation {
  animation: pulse 0.5s ease-in-out;
}