用CSS还原经典像素马里奥的魅力

前端

2023-10-25 06:12:33

像素风马里奥：用CSS重温经典

探索像素风的魅力

怀念像素风游戏的黄金时代吗？那些有限调色板和分辨率的游戏激发了游戏开发者无限的创造力，孕育了如今已成为游戏史上不可磨灭印记的标志性图像。而像素马里奥，正是其中最具代表性的角色之一，它承载着许多玩家的童年回忆。

用CSS重现像素马里奥

如今，CSS为我们提供了重现像素风艺术的强大工具。让我们深入探讨如何使用CSS网格和一些巧妙的技巧，打造一个像素完美的马里奥。

构建画布

首先，创建一个容器容纳马里奥，并创建一个子元素表示马里奥本身。

<div class="mario-container">
  <div class="mario"></div>
</div>

设定画布尺寸

像素马里奥通常为 32x32 像素，因此设置容器和马里奥元素为这些尺寸。

.mario-container {
  width: 32px;
  height: 32px;
}

网格化马里奥

使用CSS网格将马里奥元素划分为一个 8x8 的网格，每个单元格代表一个像素。设置网格间隙为 0，防止单元格之间出现空格。

.mario {
  display: grid;
  grid-template-columns: repeat(8, 4px);
  grid-template-rows: repeat(8, 4px);
  gap: 0;
}

填充像素

使用背景颜色和网格定位，为马里奥的基本特征着色。

.mario {
  background-color: #FF0000;
}

.mario-head {
  background-color: #FFFFFF;
  grid-column-start: 3;
  grid-column-end: 6;
  grid-row-start: 2;
  grid-row-end: 4;
}

.mario-overalls {
  background-color: #0000FF;
  grid-column-start: 2;
  grid-column-end: 8;
  grid-row-start: 4;
  grid-row-end: 8;
}

.mario-mustache {
  background-color: #000000;
  grid-column-start: 3;
  grid-column-end: 5;
  grid-row-start: 5;
  grid-row-end: 6;
}

添加细节

为马里奥添加眼睛、嘴巴和手臂等额外细节。

.mario-eyes {
  background-color: #FFFFFF;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 3;
  grid-row-end: 4;
}

.mario-mouth {
  background-color: #000000;
  grid-column-start: 4;
  grid-column-end: 5;
  grid-row-start: 4;
  grid-row-end: 5;
}

.mario-arms {
  background-color: #FF0000;
  grid-column-start: 2;
  grid-column-end: 3;
  grid-row-start: 5;
  grid-row-end: 7;
}