css进度条

来源：爱站旅游

导读css进度条

1.定位left来实现
2.定位width来实现
3 进度背景可以用 background-image: linear-gradient(60deg, transparent 0rem, transparent 0.8rem, #4dafe2 0.8rem, #4dafe2 1.6rem, transparent 1.6rem, transparent 2.4rem, #4dafe2 2.4rem);修饰


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    .pride-audio {
        width: 672px;
        height: 200px;
        background-color: #f9f9f9;
        border-radius: 16px;
        padding: 0 30px;
        box-sizing: border-box;
    }

    .pride-audio-title {
        height: 78px;
        line-height: 78px;
        font-size: 32px;
        color: #323232;
        white-space: nowrap;
        /* text-emphasis: none; */
        text-overflow: ellipsis;
        overflow: hidden;
    }

    .pride-audio-subhead-title {
        color: #979797;
        font-size: 22px;
    }

    .pride-audio-content {
        height: 70px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pride-audio-progress {
        width: 504px;
        height: 6px;
        background-color: #999;
        position: relative;

    }

    .pride-audio-progress-percent {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        width: 10%;
        background-color: #03020c;

    }

    .pride-audio-progress-percent::before {
        content: "";
        position: absolute;
        right: 0;
        top: 50%;
        margin-top: -5px;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background-color: #03020c;

    }

    .pride-audio-progress-time {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .pride-audio-icon {
        width: 72px;
        height: 72px;

    }
</style>

<body>
    <div class="pride-audio">
        <div class="pride-audio-title">实时更新:全国现存确诊 新型肺炎实时更新:全国现存确诊 新型肺炎</div>
        <div class="pride-audio-subhead-title">来自好尔美健康管理语音版</div>
        <div class="pride-audio-content">
            <div class="pride-audio-progress">
                <div class="pride-audio-progress-percent"></div>
                <div class="pride-audio-progress-time">
                    <span>04:25</span> 16:45
                </div>
            </div>
            <img class="pride-audio-icon" src="./logo.png" alt="">
        </div>

    </div>
    <script>

    </script>
</body>

</html>

因篇幅问题不能全部显示，请点此查看更多更全内容

查看全文

Top