我正在使用 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; }
按鍵的定位是使用網格實現的。 謝謝!
您可以變更按鈕元素類型。下面我分享一下。
您可以使用
transform
屬性來取代調整 :active
偽類別中的margin
。transform
屬性可讓您稍微縮放按鈕並在按下按鈕時將其向下移動,而不會影響周圍元素的佈局。