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

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

阅读 2.4k

<!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>

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

你尚未登录，登录后可以

省市区街道数据在哪里可以下载？

js 如何将Key属性相同的放在同一个数组？

在Electron中，我们想要创建特定的BrowserWindow，想要使用react组件作为BrowserWindow的内容，请问如何实现呢？

怎么识别手机号的主人变更了？

前端页面脚本更新时，如何让用户端，使用最新脚本？

solidjs中如何实现vue中的keep-alive功能？

el-select下拉框实现复选框多选、全选？