Ich verwende CSS, um ein Klavierlayout zu erstellen. Ich mag diesen „Knopf gedrückt“-Effekt wirklich, aber er verändert die umgebenden Elemente. Wie kann man diese Situation vermeiden?
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; }
Die Positionierung der Schaltflächen erfolgt mithilfe von Rastern. Danke!
您可以更改按钮元素类型。下面我分享一下。
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; }您可以使用
transform属性来代替调整 :active伪类中的margin。transform属性允许您稍微缩放按钮并在按下按钮时将其向下移动，而不会影响周围元素的布局。... 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; }