在前端開發中,CSS 的應用非常廣泛,其中一個很常用的功能就是點擊發亮。下面就來簡單介紹一下如何使用 CSS 實現這個功能。
button { background-color: #fff; /* 設置背景顏色 */ border: none; /* 去除邊框 */ outline: none; /* 去除外邊框 */ cursor: pointer; /* 設置鼠標樣式為手型 */ transition: background-color .3s ease; /* 設置過渡動畫效果 */ } button:hover { background-color: #eee; /* 鼠標懸浮時設置背景顏色為灰色 */ } button:active { background-color: #ccc; /* 鼠標點擊時設置背景顏色為深灰色 */ }
首先,我們需要選定一個元素,比如說一個按鈕。然后設置該元素的樣式,如設置背景顏色。接著,我們需要使用transition
屬性來設置過渡動畫效果,這樣點擊發亮才會更加平滑。在鼠標懸浮和點擊時,我們需要分別設置不同的背景顏色,這可以通過使用:hover
和:active
偽類來實現。
經過以上步驟,我們就可以實現一個簡單的點擊發亮效果了,是不是非常簡單呢?