小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
线性声波
HTML
根据自己需要创建要的声波数量(这里是纯css实现,如果觉得繁琐,也可以通过JS创建方式实现)
我这里根据需要,只创建了7个声波
<div class="music">
<div class="item one"></div>
<div class="item two"></div>
<div class="item three"></div>
<div class="item four"></div>
<div class="item five"></div>
<div class="item six"></div>
<div class="item seven"></div>
</div>
CSS
写出声波的样式,高度写在对应的 .item
.item {
position: absolute;
width: 8px;
border-radius: 6px;
background-color: #1f94ea;
}
通过 transform:translateX 属性 排列声波位置,我让其进行间隔20px,所以按照 item * 20 间距来进行计算,高度根据喜好随意设置了,看起来不那么规律一些
.music .one {
height: 18px;
transform: translateX(-60px);
}
.music .two {
height: 53px;
transform: translateX(-40px);
}
.music .three {
height: 36px;
transform: translateX(-20px);
}
.music .four {
height: 70px;
transform: translateX(0);
}
.music .five {
height: 30px;
transform: translateX(20px);
}
.music .six {
height: 40px;
transform: translateX(40px);
}
.music .seven {
height: 50px;
transform: translateX(60px);
}
写好上面的样式后,我们现在就要让声波动起来了,其实也很简单,使用animation 属性, 在其 100% 的时候,设置高度为10px,并增加一定的对比度(看起来像在发光)
@keyframes radius-animation {
100% {
height: 10px;
border-radius: 50%;
filter: contrast(2);
}
}
然后给 item 设置animation 属性,动画时间根据想要波动的速度来进行设置,我这里给的稍微慢一点,动画的速度这里是用 ease
.music .one {
animation: radius-animation .3s ease;
}
.music .two {
animation: radius-animation .6s ease;
}
.music .three {
animation: radius-animation .57s ease;
}
.music .four {
animation: radius-animation .52s ease;
}
.music .five {
animation: radius-animation .4s ease;
}
.music .six {
animation: radius-animation .3s ease;
}
.music .seven {
animation: radius-animation .7s ease;
}
最后再统一设置动画无限并反向播放。这里要注意,如果不想重复写这块代码的话,需要在写完animation 后再进行创建,不然会被覆盖
.music .item {
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
animation-direction: alternate;
-webkit-animation-direction: alternate;
}
最后把代码融为一体,结果如下