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