html+css3：实现动态语音条

最新推荐文章于 2026-03-25 01:02:02 发布

原创最新推荐文章于 2026-03-25 01:02:02 发布 · 1.7k 阅读

2 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

本文介绍了一个使用HTML和CSS实现的简洁语音进度条动画效果。该进度条具备直观的时间显示，并通过CSS动画实现了播放状态的动态反馈。背景颜色柔和，整体布局居中显示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语音条</title>
</head>
<body>
    <div class="content">
        <div class="x-audio-wrap play-body" ref="wrap">
            <div class="x-sector play">
                <div class="x-dot x-dot-move"></div>
            </div>
            <div class="x-time">19``</div>
        </div>
    </div>
</body>
<style>
    body{
        background-color: rgb(199, 183, 183);
    }
    *{
        padding: 0;
        margin: 0;
    }
    .content{
        position:absolute;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);
        
    }
    .x-audio-wrap{
        height: 30px;
        width: 300px;
        border-radius: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
        background-color: #fff;
    }
    .x-sector{
        height: 7px;
        width: 7px;
        border-radius:4px 10px;
        border-right: 2px solid #ddd;
        border-top: 2px solid #ddd;
        transform: rotate(45deg);
        position: relative;
        margin-left: 10px;

    }
    .x-dot{
        height: 4px;
        width: 4px;
        border-radius: 4px;
        background: #ddd;
        position: absolute;
        top: 4px;
    }
    .x-sector::before{
        content: "";
        height: 9px;
        width: 9px;
        border-radius:4px 12px;
        border-right: 2px solid #ddd;
        border-top: 2px solid #ddd;
        transform: rotate(0deg);
        position: absolute;
        right: -7px;
        top: -7px;
    }
    .x-sector::after{
        content: "";
        height: 12px;
        width: 12px;
        border-radius:4px 14px;
        border-right: 2px solid #ddd;
        border-top: 2px solid #ddd;
        transform: rotate(0deg);
        position: absolute;
        right: -13px;
        top: -13px;
    }
    .x-time{
        color: #999;
        font-size: 12px;
        margin-right: 10px;
    }
    @keyframes play-dot{
        from{
            background: #ddd
        }
        to{
            background: #5cadff
        }
    }
    @keyframes play-sector{
        from{
            border-color: #ddd
        }
        to{
            border-color: #5cadff
        }
    }

    @keyframes play-body-action{
        from{
            box-shadow: 0px 0px 3px rgba(0, 0, 0, 0.25);
        }
        to{
            box-shadow: rgb(56 193 117 / 63%) 0px 0px 6px inset;
        }
    }
    .play-body{
        animation: play-body-action 1s 0.5s ease-in-out infinite;
    }
    .play{
        animation: play-sector 1s 0.1s ease-in-out infinite;
    }
    .play::before{
        animation: play-sector 1s 0.6s ease-in-out infinite;
    }
    .x-sector.play::after{
        animation: play-sector 1s 1.1s ease-in-out infinite;
    }
    .x-dot-move{
        animation: play-dot 1s ease-in-out infinite;
    }
</style>
</html>