CSS 输入滑块后面的条形音箱

Question

我有问题。我创建了以下 HTML 页面：

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fa-play, .fa-pause {
    font-size: 20px;
    margin-right: 15px;
}

#progress-bar {
    flex: 1;
    position: relative;
    z-index: 1;
}

#sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    width: 100%;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #153725;
}




/* SOUND BAR ANIMATION */
.animate-bars {
     display: flex;
     align-items: center;
     width: 100%;
     height: 20px;
     overflow: hidden;
     position: relative;
}
 .animate-bars div {
     flex: 1 0 auto;
     height: 100%;
     margin: 0 -2px;
     background-color: #90416b;
     animation: animate-bar 300ms linear infinite alternate;
     transform-origin: bottom;
     opacity: 0;
}
 .animate-bars div:first-child {
     margin-left: 0;
}
 .animate-bars div:last-child {
     margin-right: 0;
}
 .animate-bars div:nth-child(1) {
     animation-duration: 701ms;
     animation-delay: 333ms;
}
 .animate-bars div:nth-child(2) {
     animation-duration: 569ms;
     animation-delay: 199ms;
}
 .animate-bars div:nth-child(3) {
     animation-duration: 677ms;
     animation-delay: 279ms;
}
 .animate-bars div:nth-child(4) {
     animation-duration: 781ms;
     animation-delay: 152ms;
}
 .animate-bars div:nth-child(5) {
     animation-duration: 516ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(6) {
     animation-duration: 541ms;
     animation-delay: 21ms;
}
 .animate-bars div:nth-child(7) {
     animation-duration: 387ms;
     animation-delay: 352ms;
}
 .animate-bars div:nth-child(8) {
     animation-duration: 691ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(9) {
     animation-duration: 612ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(10) {
     animation-duration: 781ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(11) {
     animation-duration: 587ms;
     animation-delay: 426ms;
}
 .animate-bars div:nth-child(12) {
     animation-duration: 375ms;
     animation-delay: 418ms;
}
 .animate-bars div:nth-child(13) {
     animation-duration: 400ms;
     animation-delay: 236ms;
}
 .animate-bars div:nth-child(14) {
     animation-duration: 645ms;
     animation-delay: 81ms;
}
 .animate-bars div:nth-child(15) {
     animation-duration: 379ms;
     animation-delay: 195ms;
}
 .animate-bars div:nth-child(16) {
     animation-duration: 561ms;
     animation-delay: 424ms;
}
 .animate-bars div:nth-child(17) {
     animation-duration: 384ms;
     animation-delay: 31ms;
}
 .animate-bars div:nth-child(18) {
     animation-duration: 704ms;
     animation-delay: 265ms;
}
 .animate-bars div:nth-child(19) {
     animation-duration: 464ms;
     animation-delay: 88ms;
}
 .animate-bars div:nth-child(20) {
     animation-duration: 589ms;
     animation-delay: 447ms;
}
 .animate-bars div:nth-child(21) {
     animation-duration: 713ms;
     animation-delay: 207ms;
}
 .animate-bars div:nth-child(22) {
     animation-duration: 782ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(23) {
     animation-duration: 610ms;
     animation-delay: 493ms;
}
 .animate-bars div:nth-child(24) {
     animation-duration: 371ms;
     animation-delay: 249ms;
}
 .animate-bars div:nth-child(25) {
     animation-duration: 481ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(26) {
     animation-duration: 746ms;
     animation-delay: 65ms;
}
 .animate-bars div:nth-child(27) {
     animation-duration: 382ms;
     animation-delay: 165ms;
}
 .animate-bars div:nth-child(28) {
     animation-duration: 592ms;
     animation-delay: 71ms;
}
 .animate-bars div:nth-child(29) {
     animation-duration: 600ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(30) {
     animation-duration: 401ms;
     animation-delay: 174ms;
}
 .animate-bars div:nth-child(31) {
     animation-duration: 606ms;
     animation-delay: 271ms;
}
 .animate-bars div:nth-child(32) {
     animation-duration: 515ms;
     animation-delay: 363ms;
}
 .animate-bars div:nth-child(33) {
     animation-duration: 405ms;
     animation-delay: 122ms;
}
 .animate-bars div:nth-child(34) {
     animation-duration: 448ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(35) {
     animation-duration: 439ms;
     animation-delay: 246ms;
}
 .animate-bars div:nth-child(36) {
     animation-duration: 429ms;
     animation-delay: 470ms;
}
 .animate-bars div:nth-child(37) {
     animation-duration: 565ms;
     animation-delay: 287ms;
}
 .animate-bars div:nth-child(38) {
     animation-duration: 462ms;
     animation-delay: 103ms;
}
 .animate-bars div:nth-child(39) {
     animation-duration: 590ms;
     animation-delay: 442ms;
}
 .animate-bars div:nth-child(40) {
     animation-duration: 444ms;
     animation-delay: 181ms;
}
 .animate-bars-center div {
     transform-origin: center;
}
 @keyframes animate-bar {
     0% {
         transform: scaleY(0);
         opacity: 0.8;
    }
     100% {
         transform: scaleY(100%);
         opacity: 0.4;
    }
}

<div class="audio-control">
    <button id="btnPlay" (click)="onPlayClick()" value="play"><i class="fas fa-play"></i></button>
    <span id="current-time" class="time">0:00</span>

    <!-- Animate from bottom -->
    <div class="audio-bars">
        <div id="sound-bars">
            <div class="animate-bars">
                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            </div>
        </div>
        <input type="range" id="progress-bar" max="93" value="0" (input)="onProgressChange()">
    </div>

    <span id="duration" class="time">1:33</span>
</div>

问题是条形音箱和进度条并排放置，而我希望它们重叠。条形音箱必须放在进度条后面，并且条形音箱必须与进度条一样宽。这个页面也需要响应，所以改变页面宽度，必须保持 2 栏之间的关系。这是我现在的结果：

我怎样才能达到我想要的？

Answer 1

Flexbox 中的重叠元素有点偏离了 Flexbox 的重点。我建议的解决方案是 CSS 网格，您可以在其中指定 1x1 响应式网格，然后将这些元素附加到您刚刚创建的单个节点。

但是，在 Flexbox 中，与正常 css 一样，您可以向父元素添加 position:absolute; 并强制定位，然后使用 position:relative 将条形音箱浮动在后面。剩下的问题应该只是一般样式。

.audio-control {
    display: flex;
    width:300px;
    position: absolute;
    margin: 10px 5px;
}

.fa-play, .fa-pause {
    font-size: 20px;
    margin-right: 15px;
}

#progress-bar {
    flex: 1;
    position: absolute;
    z-index: 1;
    width:100%;
}

#sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    width: 100%;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #153725;
}




/* SOUND BAR ANIMATION */
.animate-bars {
     display: flex;
     align-items: center;
     width: 100%;
     height: 20px;
     overflow: hidden;
     position: relative;
}
 .animate-bars div {
     flex: 1 0 auto;
     height: 100%;
     margin: 0 -2px;
     background-color: #90416b;
     animation: animate-bar 300ms linear infinite alternate;
     transform-origin: bottom;
     opacity: 0;
}
 .animate-bars div:first-child {
     margin-left: 0;
}
 .animate-bars div:last-child {
     margin-right: 0;
}
 .animate-bars div:nth-child(1) {
     animation-duration: 701ms;
     animation-delay: 333ms;
}
 .animate-bars div:nth-child(2) {
     animation-duration: 569ms;
     animation-delay: 199ms;
}
 .animate-bars div:nth-child(3) {
     animation-duration: 677ms;
     animation-delay: 279ms;
}
 .animate-bars div:nth-child(4) {
     animation-duration: 781ms;
     animation-delay: 152ms;
}
 .animate-bars div:nth-child(5) {
     animation-duration: 516ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(6) {
     animation-duration: 541ms;
     animation-delay: 21ms;
}
 .animate-bars div:nth-child(7) {
     animation-duration: 387ms;
     animation-delay: 352ms;
}
 .animate-bars div:nth-child(8) {
     animation-duration: 691ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(9) {
     animation-duration: 612ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(10) {
     animation-duration: 781ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(11) {
     animation-duration: 587ms;
     animation-delay: 426ms;
}
 .animate-bars div:nth-child(12) {
     animation-duration: 375ms;
     animation-delay: 418ms;
}
 .animate-bars div:nth-child(13) {
     animation-duration: 400ms;
     animation-delay: 236ms;
}
 .animate-bars div:nth-child(14) {
     animation-duration: 645ms;
     animation-delay: 81ms;
}
 .animate-bars div:nth-child(15) {
     animation-duration: 379ms;
     animation-delay: 195ms;
}
 .animate-bars div:nth-child(16) {
     animation-duration: 561ms;
     animation-delay: 424ms;
}
 .animate-bars div:nth-child(17) {
     animation-duration: 384ms;
     animation-delay: 31ms;
}
 .animate-bars div:nth-child(18) {
     animation-duration: 704ms;
     animation-delay: 265ms;
}
 .animate-bars div:nth-child(19) {
     animation-duration: 464ms;
     animation-delay: 88ms;
}
 .animate-bars div:nth-child(20) {
     animation-duration: 589ms;
     animation-delay: 447ms;
}
 .animate-bars div:nth-child(21) {
     animation-duration: 713ms;
     animation-delay: 207ms;
}
 .animate-bars div:nth-child(22) {
     animation-duration: 782ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(23) {
     animation-duration: 610ms;
     animation-delay: 493ms;
}
 .animate-bars div:nth-child(24) {
     animation-duration: 371ms;
     animation-delay: 249ms;
}
 .animate-bars div:nth-child(25) {
     animation-duration: 481ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(26) {
     animation-duration: 746ms;
     animation-delay: 65ms;
}
 .animate-bars div:nth-child(27) {
     animation-duration: 382ms;
     animation-delay: 165ms;
}
 .animate-bars div:nth-child(28) {
     animation-duration: 592ms;
     animation-delay: 71ms;
}
 .animate-bars div:nth-child(29) {
     animation-duration: 600ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(30) {
     animation-duration: 401ms;
     animation-delay: 174ms;
}
 .animate-bars div:nth-child(31) {
     animation-duration: 606ms;
     animation-delay: 271ms;
}
 .animate-bars div:nth-child(32) {
     animation-duration: 515ms;
     animation-delay: 363ms;
}
 .animate-bars div:nth-child(33) {
     animation-duration: 405ms;
     animation-delay: 122ms;
}
 .animate-bars div:nth-child(34) {
     animation-duration: 448ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(35) {
     animation-duration: 439ms;
     animation-delay: 246ms;
}
 .animate-bars div:nth-child(36) {
     animation-duration: 429ms;
     animation-delay: 470ms;
}
 .animate-bars div:nth-child(37) {
     animation-duration: 565ms;
     animation-delay: 287ms;
}
 .animate-bars div:nth-child(38) {
     animation-duration: 462ms;
     animation-delay: 103ms;
}
 .animate-bars div:nth-child(39) {
     animation-duration: 590ms;
     animation-delay: 442ms;
}
 .animate-bars div:nth-child(40) {
     animation-duration: 444ms;
     animation-delay: 181ms;
}
 .animate-bars-center div {
     transform-origin: center;
}
 @keyframes animate-bar {
     0% {
         transform: scaleY(0);
         opacity: 0.8;
    }
     100% {
         transform: scaleY(100%);
         opacity: 0.4;
    }
}

<div class="audio-control">
    <button id="btnPlay" (click)="onPlayClick()" value="play"><i class="fas fa-play"></i></button>
    <span id="current-time" class="time">0:00</span>

    <!-- Animate from bottom -->
    <div class="audio-bars">
        <div id="sound-bars">
            <div class="animate-bars">
                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            </div>
        </div>
        <input type="range" id="progress-bar" max="93" value="0" (input)="onProgressChange()">
    </div>

    <span id="duration" class="time">1:33</span>
</div>

Answer 2

我会将范围输入字段定位为绝对值，以便下面的条形图本身确定宽度。（他们在这里超过了整个可用宽度，但这种方式在其他情况下也应该有效，比如如果 .audio-bars 得到 flex:50% 而不是什么。）

如果输入有点偏右，则尝试使用 width: calc(100% - ...) 来补偿边距等。

.audio-control {
    display: flex;
    margin: 10px 5px;
}

.fa-play, .fa-pause {
    font-size: 20px;
    margin-right: 15px;
}

#progress-bar {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1;
}

#sound-bars {
    flex: 1;
    z-index: 0;
    position: relative;
    margin-bottom: 7px;
}

.audio-bars {
    display: flex;
    flex: 1;
    margin: 0px 3px;
    height: 30px;
    align-items: end;
    background: red;
    position: relative;
}

button {
    background-color: transparent;
    border: none;
    padding: 0px;
    margin: 0px;
    color: #153725;
}




/* SOUND BAR ANIMATION */
.animate-bars {
     display: flex;
     align-items: center;
     width: 100%;
     height: 20px;
     overflow: hidden;
     position: relative;
}
 .animate-bars div {
     flex: 1 0 auto;
     height: 100%;
     margin: 0 -2px;
     background-color: #90416b;
     animation: animate-bar 300ms linear infinite alternate;
     transform-origin: bottom;
     opacity: 0;
}
 .animate-bars div:first-child {
     margin-left: 0;
}
 .animate-bars div:last-child {
     margin-right: 0;
}
 .animate-bars div:nth-child(1) {
     animation-duration: 701ms;
     animation-delay: 333ms;
}
 .animate-bars div:nth-child(2) {
     animation-duration: 569ms;
     animation-delay: 199ms;
}
 .animate-bars div:nth-child(3) {
     animation-duration: 677ms;
     animation-delay: 279ms;
}
 .animate-bars div:nth-child(4) {
     animation-duration: 781ms;
     animation-delay: 152ms;
}
 .animate-bars div:nth-child(5) {
     animation-duration: 516ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(6) {
     animation-duration: 541ms;
     animation-delay: 21ms;
}
 .animate-bars div:nth-child(7) {
     animation-duration: 387ms;
     animation-delay: 352ms;
}
 .animate-bars div:nth-child(8) {
     animation-duration: 691ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(9) {
     animation-duration: 612ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(10) {
     animation-duration: 781ms;
     animation-delay: 168ms;
}
 .animate-bars div:nth-child(11) {
     animation-duration: 587ms;
     animation-delay: 426ms;
}
 .animate-bars div:nth-child(12) {
     animation-duration: 375ms;
     animation-delay: 418ms;
}
 .animate-bars div:nth-child(13) {
     animation-duration: 400ms;
     animation-delay: 236ms;
}
 .animate-bars div:nth-child(14) {
     animation-duration: 645ms;
     animation-delay: 81ms;
}
 .animate-bars div:nth-child(15) {
     animation-duration: 379ms;
     animation-delay: 195ms;
}
 .animate-bars div:nth-child(16) {
     animation-duration: 561ms;
     animation-delay: 424ms;
}
 .animate-bars div:nth-child(17) {
     animation-duration: 384ms;
     animation-delay: 31ms;
}
 .animate-bars div:nth-child(18) {
     animation-duration: 704ms;
     animation-delay: 265ms;
}
 .animate-bars div:nth-child(19) {
     animation-duration: 464ms;
     animation-delay: 88ms;
}
 .animate-bars div:nth-child(20) {
     animation-duration: 589ms;
     animation-delay: 447ms;
}
 .animate-bars div:nth-child(21) {
     animation-duration: 713ms;
     animation-delay: 207ms;
}
 .animate-bars div:nth-child(22) {
     animation-duration: 782ms;
     animation-delay: 194ms;
}
 .animate-bars div:nth-child(23) {
     animation-duration: 610ms;
     animation-delay: 493ms;
}
 .animate-bars div:nth-child(24) {
     animation-duration: 371ms;
     animation-delay: 249ms;
}
 .animate-bars div:nth-child(25) {
     animation-duration: 481ms;
     animation-delay: 74ms;
}
 .animate-bars div:nth-child(26) {
     animation-duration: 746ms;
     animation-delay: 65ms;
}
 .animate-bars div:nth-child(27) {
     animation-duration: 382ms;
     animation-delay: 165ms;
}
 .animate-bars div:nth-child(28) {
     animation-duration: 592ms;
     animation-delay: 71ms;
}
 .animate-bars div:nth-child(29) {
     animation-duration: 600ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(30) {
     animation-duration: 401ms;
     animation-delay: 174ms;
}
 .animate-bars div:nth-child(31) {
     animation-duration: 606ms;
     animation-delay: 271ms;
}
 .animate-bars div:nth-child(32) {
     animation-duration: 515ms;
     animation-delay: 363ms;
}
 .animate-bars div:nth-child(33) {
     animation-duration: 405ms;
     animation-delay: 122ms;
}
 .animate-bars div:nth-child(34) {
     animation-duration: 448ms;
     animation-delay: 274ms;
}
 .animate-bars div:nth-child(35) {
     animation-duration: 439ms;
     animation-delay: 246ms;
}
 .animate-bars div:nth-child(36) {
     animation-duration: 429ms;
     animation-delay: 470ms;
}
 .animate-bars div:nth-child(37) {
     animation-duration: 565ms;
     animation-delay: 287ms;
}
 .animate-bars div:nth-child(38) {
     animation-duration: 462ms;
     animation-delay: 103ms;
}
 .animate-bars div:nth-child(39) {
     animation-duration: 590ms;
     animation-delay: 442ms;
}
 .animate-bars div:nth-child(40) {
     animation-duration: 444ms;
     animation-delay: 181ms;
}
 .animate-bars-center div {
     transform-origin: center;
}
 @keyframes animate-bar {
     0% {
         transform: scaleY(0);
         opacity: 0.8;
    }
     100% {
         transform: scaleY(100%);
         opacity: 0.4;
    }
}

<br><br>
<div class="audio-control">
    <button id="btnPlay" (click)="onPlayClick()" value="play"><i class="fas fa-play"></i></button>
    <span id="current-time" class="time">0:00</span>

    <!-- Animate from bottom -->
    <div class="audio-bars">
        <div id="sound-bars">
            <div class="animate-bars">
                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>

                <div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div>
            </div>
        </div>
        <input type="range" id="progress-bar" max="93" value="0" (input)="onProgressChange()">
    </div>

    <span id="duration" class="time">1:33</span>
</div>

CSS 输入滑块后面的条形音箱

CSS Sound bar behind input slider

html

css

sass