把按键显示在屏幕上的 Windows 工具，方便录屏时使用

爱意满满的作品展示区。

This topic created in 2322 days ago, the information mentioned may be changed or developed.

在录制屏幕时，需要把快捷键等信息现在是视频中，所以需要把按键显示在屏幕上。目前有一些工具能做到这一点，但是样式和位置控制都十分有限，用起来不是很顺手。

写了个小工具来做这件事： https://github.com/Sneezry/Signpost

虽然是用 Electron 写的，但是我根据自己的需求，只做了 Windows 10 64-bit 的兼容，Windows 10 32-bit、Windows 7、Linux 和 macOS 都不能用。因为改起来并不困难，所以有需要的同学可以自己改。

用 Windows 10 64-bit 的同学可以直接到项目的 release 里下载安装包。

录了个比较短的视频来做演示： https://image.sneezry.com/d16zosf7okzw.mp4

Supplement 1 · Jan 6, 2020

分享一段自定义CSS：

#signpost {
  background: rgba(0, 0, 0, 0.75);
  opacity: 1;
}

.kbd {
  box-sizing: border-box;
  line-height: 80px;
  font-size: 22px;
  text-align: center;
  width: 80px;
  color: #555;
  cursor: pointer;
  margin: 0 8px;
  height: 80px;
  border-color: #f2f2f2;
  border-style: solid;
  text-shadow: 0 0.5px 1px #777, 0 2px 6px #f2f2f2;
  border-width: 1px;
  border-radius: 10px;
  background: -webkit-linear-gradient(top, #f9f9f9 0%, #D2D2D2 80%, #c0c0c0 100%);
  font-family: sans-serif;
  display: inline-block;
  box-shadow: 0 0 1px #888,0 1px 0 #fff, 0 6px 0 #C0C0C0, 0 8px 17px rgba(#444, 0.4), 2px 1px 4px rgba(#444, 0.25), -2px 1px 4px rgba(#444, 0.25), 0 9px 16px rgba(#444, 0.1);
}

.plus {
  display: none;
}

Windows

bit

录屏

工具

21 replies • 2021-10-24 18:01:44 +08:00