有趣的css - 音频小动效-CFANZ编程社区

大家好，我是 Just，这里是「设计师工作日常」，今天分享的是用 css3 实现一个好玩的音频小动效。

《有趣的css》系列最新实例通过公众号「设计师工作日常」发布。

(目录)

整体效果

使用 css3 animation 动画属性模拟实现一个音频节奏变化的小动效。

一个好玩的音频小动效。

核心代码部分，简要说明了写法思路；完整代码在最后，可直接复制到本地运行。

核心代码

html 代码

<div class=audio-box37>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
  <div class=audio37-block></div>
</div>

用7个 div 标签，绘制音频节奏谱。

css 部分代码

.audio-box37{
  width: 84px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.audio37-block{
  width: 6px;
  box-sizing: border-box;
  background-color: #97E138;
  animation: audio73-eff 2s linear infinite;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
}
.audio37-block:nth-of-type(2){
  background-color: #FF3A85;
  animation-delay: .3s;
  animation-duration: 2.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
}
.audio37-block:nth-of-type(3){
  background-color: #A2DAF6;
  animation-delay: .38s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
}
.audio37-block:nth-of-type(4){
  background-color: #FFD6D0;
  animation-delay: .5s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
}
.audio37-block:nth-of-type(5){
  background-color: #FF472C;
  animation-duration: 2.7s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
}
.audio37-block:nth-of-type(6){
  background-color: #DE74CE;
  animation-delay: .6s;
  animation-duration: 1.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
}
.audio37-block:nth-of-type(7){
  background-color: #36AFCA;
  animation-delay: .8s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
}
@keyframes audio73-eff{
  0%{
    height: 0;
  }
  50%{
    height: 32px;
  }
  100%{
    height: 0;
  }
}

7个 div 基于 flex 布局，进行底部对齐，让7个 div 标签变化时从底部往上进行高度的变化

然后基于 animation 属性，再设置不同的延迟时间及动画时长，让7个 div 标签在视觉上实现不同的变化频率。

完整代码如下

html 页面

<!DOCTYPE html>
<html lang=zh>
  <head>
    <meta charset=utf-8>
    <link rel=stylesheet href=style.css>
    <title>音频小动效</title>
  </head>
  <body>
    <div class=app>
      <div class=audio-box37>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
        <div class=audio37-block></div>
      </div>
    </div>
  </body>
</html>

css 样式

/** style.css **/
.app{
  width: 100%;
  height: 100vh;
  background-color: #ffffff;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.audio-box37{
  width: 84px;
  height: 32px;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
.audio37-block{
  width: 6px;
  box-sizing: border-box;
  background-color: #97E138;
  animation: audio73-eff 2s linear infinite;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #97E138;
}
.audio37-block:nth-of-type(2){
  background-color: #FF3A85;
  animation-delay: .3s;
  animation-duration: 2.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF3A85;
}
.audio37-block:nth-of-type(3){
  background-color: #A2DAF6;
  animation-delay: .38s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #A2DAF6;
}
.audio37-block:nth-of-type(4){
  background-color: #FFD6D0;
  animation-delay: .5s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FFD6D0;
}
.audio37-block:nth-of-type(5){
  background-color: #FF472C;
  animation-duration: 2.7s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #FF472C;
}
.audio37-block:nth-of-type(6){
  background-color: #DE74CE;
  animation-delay: .6s;
  animation-duration: 1.4s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #DE74CE;
}
.audio37-block:nth-of-type(7){
  background-color: #36AFCA;
  animation-delay: .8s;
  box-shadow: 0 -1px 0 #ffffff, 0 -2px 0 #36AFCA;
}
@keyframes audio73-eff{
  0%{
    height: 0;
  }
  50%{
    height: 32px;
  }
  100%{
    height: 0;
  }
}

页面渲染效果

以上就是所有代码，以及简单的思路，希望对你有一些帮助或者启发。

我是 Just，这里是「设计师工作日常」，求点赞求关注！