css 录音声波动效

最新推荐文章于 2025-03-25 21:58:09 发布

最初都是小白

最新推荐文章于 2025-03-25 21:58:09 发布

阅读量5.6k

点赞数 3

分类专栏： Css 文章标签： css css3 javascript

本文链接：https://blog.youkuaiyun.com/Originally_M/article/details/123548370

版权

Css 专栏收录该内容

20 篇文章

订阅专栏

想要的效果：

类似微信的按住说话功能：

在这里插入图片描述

HTML

<div class="time-box">
    <span class="start-taste-line">
      <hr class="hr1" />
      <hr class="hr2" />
      <hr class="hr3" />
      <hr class="hr4" />
      <hr class="hr5" />
      <hr class="hr6" />
      <hr class="hr7" />
      <hr class="hr8" />
      <hr class="hr9" />
      <hr class="hr10" />
    </span>
 </div>

CSS

  .time-box .start-taste-line hr {
            background-color: red;  //声波颜色
            width: 3px;
            height: 6px;
            margin: 0 0.03rem;
            display: inline-block;
            border: none;
          }
          hr {
            animation: note 0.2s ease-in-out;
            animation-iteration-count: infinite;
            animation-direction: alternate;
          }

          .hr1 {
            animation-delay: -1s;
          }

          .hr2 {
            animation-delay: -0.9s;
          }

          .hr3 {
            animation-delay: -0.8s;
          }

          .hr4 {
            animation-delay: -0.7s;
          }

          .hr5 {
            animation-delay: -0.6s;
          }

          .hr6 {
            animation-delay: -0.5s;
          }

          .hr7 {
            animation-delay: -0.4s;
          }

          .hr8 {
            animation-delay: -0.3s;
          }

          .hr9 {
            animation-delay: -0.2s;
          }

          .hr10 {
            animation-delay: -0.1s;
          }

          @keyframes note {
            from {
              transform: scaleY(1);
            }
            to {
              transform: scaleY(4);
            }
          }