CSS 點擊手指是一種用于網(wǎng)頁設計的特殊效果,可以增加交互體驗和美觀度,具體實現(xiàn)方法如下。
在 CSS 中,使用cursor: pointer
可以把鼠標變成手指的形狀,表示該區(qū)域可以被點擊。但是這個效果對于觸摸屏設備來說,顯然不能滿足用戶的需求。
為了讓觸摸屏設備的用戶也能感受到點擊效果,我們可以給手指添加點擊后下壓的動畫,即使用:active
選擇器和transform: translateY(2px)
屬性實現(xiàn)。其中,translateY(2px)
表示手指下壓 2 像素。
為了使用這種效果,只需要在 HTML 中添加相應的類名,如下所示:
<button class="click-finger">點擊我</button>
這樣,當用戶在 PC 或觸摸屏設備上點擊該按鈕時,就能看到手指下壓的特殊效果。
上一篇css 點擊播放gif
下一篇css 點擊添加陰影效果