css制作一个音频声波效果

Posted 2020-11-27 fairy62

1.template代码

<view class="voice-image">
                    <view class="lines">
                        <text class="hr hr1" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr2" style="{{lineAnimation?‘animation:liner .5s -1.9s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr3" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr4" style="{{lineAnimation?‘animation:liner .5s -1.7s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr5" style="{{lineAnimation?‘animation:liner .5s -1.2s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr6" style="{{lineAnimation?‘animation:liner .5s -1.5s ease-in-out alternate infinite;‘:‘‘}}"></text>
                        <text class="hr hr7" style="{{lineAnimation?‘animation:liner .5s -1s ease-in-out alternate infinite;‘:‘‘}}"></text>
                    </view>
                </view>

2.css代码

.voice-image{
            display: inline-flex;
            width: 102rpx;
            height: 70rpx;
            margin-bottom: 36rpx;
            .lines{
                width: 100%;
                height: 100%;
                display: inline-flex;
                justify-content: space-between;
                align-items: center;
            }
        }
.hr{
        background-color: #fff;
        width: 4rpx;
        height: 100%;
        float: right;
    }

    .hr1{
        transform: scaleY(.6);
    }
    .hr2{

    }
    .hr3{
        transform: scaleY(.5);
    }
    .hr4{

    }
    .hr5{
        transform: scaleY(.6);
    }
    .hr6{

    }
    .hr7{
        transform: scaleY(.7);
    }
    @keyframes liner {
        0% {
            transform: scaleY(.5);
        }
        100% {
            transform: scaleY(1);
        }
    }