在 Discord 網路應用程式中,當單擊并按住導航欄(服務器)按鈕時,它會向下移動一點,如以下 GIF 所示:https : //imgur.com/a/bC25LtO
如何在 CSS 或 CSS & JS 中實作這種效果?
uj5u.com熱心網友回復:
您可以使用偽:active和位置absolute
.btn {
position: relative;
top: 0px;
font-family: "Open Sans";
text-decoration: none;
font-size: 25px;
padding: 15px 50px;
margin: 0 10px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0px 5px 0px #ccc;
transition: all 250ms ease;
}
.btn:active {
position: relative;
top: 5px;
box-shadow: none !important;
transition: all 250ms ease;
}
<button class="btn">press me</button>
或:active與translateY()
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/364565.html
標籤:javascript html css
下一篇:當螢屏變窄時堆疊兩個Div
