css实现跳动的声波

4,029 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

线性声波

jwy9y-y93ri.gif

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

image.png

.item {
            position: absolute;
            width: 8px;
            border-radius: 6px;
            background-color: #1f94ea;
         
        }  

通过 transform:translateX 属性 排列声波位置,我让其进行间隔20px,所以按照 item * 20 间距来进行计算,高度根据喜好随意设置了,看起来不那么规律一些

image.png

        .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; 
       }

最后把代码融为一体,结果如下

jwy9y-y93ri.gif