如题：怎样实现微信语音聊天的动态语音图标？我在做一个聊天功能，就需要做成微信语音那种样子，点击播放的时候，语音图标就要动态变化。请问有哪些方法可以实现这个效果的？

怎样实现微信语音聊天的动态语音图标？

2 个回答

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .out {
      display: inline-block;
      position: relative;
    }

    .out::before,
    .out::after {
      content: "";
      display: block;
      background-color: #fff;
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 999;
      -webkit-clip-path: polygon(100% 0, 0 0, 0 50%);
      clip-path: polygon(100% 0, 0 0, 0 50%);
    }

    .out::after {
      left: 0;
      top: 0;
      -webkit-clip-path: polygon(100% 100%, 0 100%, 0 50%);
      clip-path: polygon(100% 100%, 0 100%, 0 50%);
      background-color: #fff;

    }

    .loader {
      width: 60px;
      height: 120px;
      border-radius: 0px 200px 200px 0px;
      -webkit-mask: repeating-radial-gradient(farthest-side at left, #0000 0, #000 1px 12%, #0000 calc(12% + 1px) 20%);
      background: radial-gradient(farthest-side at left, #514b82 0 95%, #0000 0) left/0% 0% no-repeat #ddd;
      animation: l10 2s infinite steps(6);
    }

    @keyframes l10 {
      100% {
        background-size: 120% 120%
      }
    }
  </style>
</head>

<body>
  <div class="out">
    <div class="loader"></div>
  </div>

</body>

</html>