站長(zhǎng)資訊網(wǎng)在上一篇《如何用css快速創(chuàng)建3點(diǎn)加載動(dòng)畫(huà)》中給大家介紹了如何用css創(chuàng)建3點(diǎn)加載動(dòng)畫(huà)效果，感興趣的朋友可以去閱讀了解一下~
本文將給大家介紹在前端設(shè)計(jì)過(guò)程中非常實(shí)用的一個(gè)動(dòng)態(tài)效果，就是在單擊按鈕時(shí)顯示按下的動(dòng)態(tài)效果，光說(shuō)可能大家還不明白是什么效果，我們可以直接看一個(gè)動(dòng)圖：
不過(guò)本文不僅會(huì)介紹實(shí)現(xiàn)這一種按下的動(dòng)態(tài)效果，還會(huì)介紹另一種，繼續(xù)往下看！
第一種效果實(shí)現(xiàn)方法：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 為按鈕添加一些基本樣式 */ .btn { text-decoration: none; border: none; padding: 12px 40px; font-size: 16px; background-color: green; color: #fff; border-radius: 5px; box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); cursor: pointer; outline: none; transition: 0.2s all; } /* 在按鈕處于活動(dòng)狀態(tài)時(shí)添加轉(zhuǎn)換 */ .btn:active { transform: scale(0.98); box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); } </style> </head> <body> <!-- 帶有類(lèi)'btn'的按鈕 --> <button class="btn">Button</button> </body> </html>
效果如下：
注：
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
使用CSS的transform屬性在按鈕處于活動(dòng)狀態(tài)時(shí)添加按下效果。CSS transform 屬性允許我們縮放、旋轉(zhuǎn)、移動(dòng)和傾斜元素。
第二種效果實(shí)現(xiàn)方法：
<!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title></title> <style> /* 向按鈕添加基本樣式 */ .btn { padding: 15px 40px; font-size: 16px; text-align: center; cursor: pointer; outline: none; color: #fff; background-color: #ff311f; border: none; border-radius: 5px; box-shadow: box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); } /* “active”添加樣式 */ .btn:active { box-shadow: box-shadow: 7px 6px 28px 1px rgba(0, 0, 0, 0.24); transform: translateY(4px); } </style> </head> <body> <button class="btn">點(diǎn)擊我</button> </body> </html>
效果如下：
注：當(dāng)active 偽類(lèi)處于活動(dòng)狀態(tài)時(shí)，你可以使用其他方法在單擊按鈕時(shí)創(chuàng)建自己的效果。
PHP中文網(wǎng)平臺(tái)有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
