輸入滑塊后面的CSS條形音箱-有解無憂

我有個問題。我創建了以下 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>

The problem is that the soundbar and the progress bar are being placed next to each other, while I want them to overlap. The sound-bar must be placed behind the progress-bar and the sound-bar must be as wide as the progress-bar. This page also needs to be responsive, so changing the page width, must maintain the relation between the 2 bars. Here is the result I have now: 輸入滑塊后面的 CSS 條形音箱

How can I achieve what I want?

uj5u.com熱心網友回復：

我會將范圍輸入欄位定位為絕對值，以便底層條本身確定寬度。（它們在這里覆寫了整個可用寬度，但這樣它也應該在其他情況下作業，比如 if .audio-barsgotflex: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>

uj5u.com熱心網友回復：

Flexbox 中元素的重疊有點超出 Flexbox 的意義。我建議的解決方案是 CSS 網格，您可以在其中指定一個 1x1 回應式網格，然后將這些元素附加到您剛剛創建的單個節點上。

但是，在 Flexbox 和普通 css 中，您可以將 a 添加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>

轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/322233.html

標籤：html css sass

上一篇：開發可訪問性，我被告知<li>“串列項沒有<ul>、<ol>或role="list"父元素”

下一篇：如何檢查每行和每列中的html表格單元格值