html实现微信语音输入动画

要实现微信语音输入动画，可以使用HTML5中的`<canvas>`标签和JavaScript代码来绘制动画效果。

首先，在HTML文件中添加一个`<canvas>`标签，设置其宽度和高度，如下所示：

<canvas id="voice-canvas" width="50" height="50"></canvas>

然后，在JavaScript代码中获取该`<canvas>`标签的上下文，并使用`arc()`方法绘制一个圆形，设置其填充颜色为灰色，如下所示：

var canvas = document.getElementById("voice-canvas");
var ctx = canvas.getContext("2d");

ctx.beginPath();
ctx.arc(25, 25, 20, 0, Math.PI * 2);
ctx.fillStyle = "#ccc";
ctx.fill();

接下来，使用`setInterval()`方法实现动画效果。每隔一段时间，就改变圆形的填充颜色，从灰色变成白色，再变回灰色，如下所示：

var color = "#ccc";

setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.arc(25, 25, 20, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
  
  color = (color == "#ccc") ? "#fff" : "#ccc";
}, 500);

最后，将以上代码整合到一起，实现微信语音输入动画的效果。完整代码如下所示：

<canvas id="voice-canvas" width="50" height="50"></canvas>

<script>
var canvas = document.getElementById("voice-canvas");
var ctx = canvas.getContext("2d");
var color = "#ccc";

setInterval(function() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  ctx.beginPath();
  ctx.arc(25, 25, 20, 0, Math.PI * 2);
  ctx.fillStyle = color;
  ctx.fill();
  
  color = (color == "#ccc") ? "#fff" : "#ccc";
}, 500);
</script>