Saya menggunakan CSS untuk mencipta susun atur piano. Saya sangat suka kesan "butang ditekan" ini, tetapi ia mengubah elemen sekeliling. Bagaimana untuk mengelakkan situasi ini?
<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;
}
Kedudukan butang dicapai menggunakan grid. Terima kasih!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Anda boleh menukar jenis elemen butang. Jom saya kongsikan di bawah.
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>Anda boleh menggunakan atribut
transform属性来代替调整 :active伪类中的margin。transformyang membolehkan anda menskalakan sedikit butang dan mengalihkannya ke bawah apabila ditekan, tanpa menjejaskan reka letak elemen sekeliling.... 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; }