返回

用 CSS 复刻一台萌萌哒打印机，分分钟搞定！

前端

各位亲爱的读者们，大家好！今天，我们将踏上一段妙趣横生的技术之旅，用 CSS 的神奇力量，亲手打造一台超级可爱的打印机！准备好发挥你的想象力和创造力了吗？

起航：设定画布

就像任何艺术创作一样，我们首先需要设定画布，为我们的打印机创造一个合适的舞台。在 HTML 中，我们使用 <body> 元素作为画布，并用 CSS 赋予它以下样式：

body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

这几个简单的规则将确保我们的打印机居中显示在页面上，为接下来的创作奠定基础。

绘制打印机主体

现在，让我们开始绘制打印机的核心部分。我们创建一个 <div> 元素作为打印机的主体，并用 CSS 赋予它应有的外观：

.printer {
  width: 300px;
  height: 200px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #cccccc;
}

有了这些规则，我们的打印机主体已经初具雏形。它是白色的，带有黑色边框，圆润的边角和微妙的阴影效果增添了立体感。

添加进纸托盘

打印机离不开进纸托盘，让我们用 CSS 再现这个必备部件。我们创建一个 <div> 元素，并用 CSS 设置其样式：

.paper-tray {
  width: 300px;
  height: 50px;
  background-color: #ffffff;
  border: 1px solid #000000;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #cccccc;
  position: absolute;
  top: 10px;
}

进纸托盘位于打印机主体下方，它同样是白色，并带有黑色边框和圆润的边角。注意，我们使用 position: absolute; 将它定位在打印机主体上方。

绘制显示屏

打印机上清晰的显示屏是必不可少的。我们用一个 <div> 元素来创建它，并用 CSS 定义其样式：

.display {
  width: 150px;
  height: 30px;
  background-color: #000000;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  position: absolute;
  top: 50px;
  left: 75px;
}

显示屏位于打印机主体顶部，它显示着文本信息。黑色背景和白色文本营造出清晰的对比度，便于阅读。

按钮点缀

没有按钮，打印机就无法正常工作。我们使用 <button> 元素创建三个按钮，并用 CSS 定义它们的样式：

.button {
  width: 50px;
  height: 50px;
  background-color: #000000;
  color: #ffffff;
  border: 1px solid #ffffff;
  border-radius: 5px;
  box-shadow: 2px 2px 2px #cccccc;
  position: absolute;
  top: 100px;
}

.button-left {
  left: 50px;
}

.button-center {
  left: 150px;
}

.button-right {
  left: 250px;
}

我们创建了三个按钮，每个按钮都有自己的位置。黑色背景和白色边框使它们清晰可见，而圆润的边角和微妙的阴影效果增加了美观性。

最后润色

现在，我们的打印机已经基本完成，但还缺少一点精细润色。我们添加一些额外的 CSS 规则来完善它的外观：

.printer:hover {
  box-shadow: 10px 10px 10px #cccccc;
}

.button:hover {
  background-color: #ffffff;
  color: #000000;
}

这些规则为打印机主体和按钮添加了悬停效果。当用户将鼠标悬停在打印机上时，阴影效果会增强，营造出一种三维感。悬停按钮时，颜色会发生反转，突显按钮的交互性。

总结

恭喜你！你现在已经用 CSS 成功打造了一台可爱的打印机。通过掌握 CSS 的基础知识，你不仅可以创建令人惊叹的视觉效果，还可以设计交互式且具有功能性的元素。

希望这篇教程能激发你的创造力，让你在 CSS 的世界中不断探索。祝你未来创作顺利！