CSS中實現按下按鈕效果的正確方法
P粉004287665
P粉004287665 2023-09-09 13:38:06
0
2
585

我正在使用 CSS 建立鋼琴佈局。 我真的很喜歡這種「按下按鈕」的效果,但它會改變周圍的元素。如何避免這種情況?

<main>
    <div id="o-2" class="octave">
        <button id="C2" class="C key"></button>
        <button id="C2-sharp" class="C-sharp key-black"></button>
        <button id="D2" class="D key"></button>
        <button id="D2-sharp" class="D-sharp key-black"></button>
        <button id="E2" class="E key"></button>
    </div>
</main>
main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.octave {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: repeat(14, auto);
}

button {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
}

button:active {
    margin-left: 4px;
    margin-top: 4px;
    box-shadow: 1px 1px 5px black;
}

按鍵的定位是使用網格實現的。 謝謝!

P粉004287665
P粉004287665

全部回覆(2)
P粉754477325

您可以變更按鈕元素類型。下面我分享一下。

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.octave {
    display: grid;
    grid-template-rows: 25% 25% 25% 25%;
    grid-template-columns: repeat(14, auto);
}

a {
    border: 1px solid black;
    margin: 1px;
    box-shadow: 5px 5px 5px black;
    cursor: pointer;
    width:14px;
    height:30px;
}

a:active {
    margin-left: 4px;
    margin-top: 4px;
    box-shadow: 1px 1px 5px black;
}
<main>
    <div id="o-2" class="octave">
        <a id="C2" class="C key"></a>
        <a id="C2-sharp" class="C-sharp key-black"></a>
        <a id="D2" class="D key"></a>
        <a id="D2-sharp" class="D-sharp key-black"></a>
        <a id="E2" class="E key"></a>
    </div>
</main>
P粉464208937

您可以使用 transform 屬性來取代調整 :active 偽類別中的 margintransform 屬性可讓您稍微縮放按鈕並在按下按鈕時將其向下移動,而不會影響周圍元素的佈局。

...
button {
  border: 1px solid black;
  margin: 1px;
  box-shadow: 5px 5px 5px black;
  cursor: pointer;
  transition: transform 0.2s ease; /* Add a smooth transition */
}

button:active {
  transform: scale(0.95) translateY(3px); /* Scale down and move down */
  box-shadow: 1px 1px 5px black;
}
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!