站長資訊網(wǎng)在上一篇《如何用css快速創(chuàng)建3點(diǎn)加載動畫》中給大家介紹了如何用css創(chuàng)建3點(diǎn)加載動畫效果，感興趣的朋友可以去閱讀了解一下~
本文將給大家介紹在前端設(shè)計過程中非常實(shí)用的一個動態(tài)效果，就是在單擊按鈕時顯示按下的動態(tài)效果，光說可能大家還不明白是什么效果，我們可以直接看一個動圖：
不過本文不僅會介紹實(shí)現(xiàn)這一種按下的動態(tài)效果，還會介紹另一種，繼續(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; } /* 在按鈕處于活動狀態(tài)時添加轉(zhuǎn)換 */ .btn:active { transform: scale(0.98); box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24); } </style> </head> <body> <!-- 帶有類'btn'的按鈕 --> <button class="btn">Button</button> </body> </html>
效果如下：
注：
transform 屬性向元素應(yīng)用 2D 或 3D 轉(zhuǎn)換。
使用CSS的transform屬性在按鈕處于活動狀態(tài)時添加按下效果。CSS transform 屬性允許我們縮放、旋轉(zhuǎn)、移動和傾斜元素。
第二種效果實(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 偽類處于活動狀態(tài)時，你可以使用其他方法在單擊按鈕時創(chuàng)建自己的效果。
PHP中文網(wǎng)平臺有非常多的視頻教學(xué)資源，歡迎大家學(xué)習(xí)《css視頻教程》！
