如何用 CSS 打造微信输入法的进度条按钮？

用 css 打造微信输入法的进度条按钮

在微信输入法中，按钮会出现一个逐渐填满的进度条效果。这个效果可以通过 css 的 linear-gradient、background-position 和 background-clip 属性实现。

css 代码：

.progress-btn {
  width: 200px;
  height: 40px;
  background: linear-gradient(to right, #ccc 0%, #333 100% 100%);
  background-position: 0 0;
  background-clip: border-box;
  transition: background-position 1s linear;
}

.progress-btn.active {
  background-position: 100% 0;
}

功能说明：

• linear-gradient 创建一个从灰色到黑色渐变的背景。
• background-position 在水平方向移动渐变位置，从而产生进度条填满的效果。
• background-clip 将渐变限制在按钮边框内。
• 在 .active 状态下，background-position 移动到 100%，表示进度条已完成。

兼容性：

需要注意的是，此方法的兼容性可能不是很好，特别是在较旧的浏览器中。以下浏览器支持该实现：

• chrome（版本 57 及以上）
• firefox（版本 52 及以上）
• edge（版本 16 及以上）
• safari（版本 10 及以上）