CSS偽類是CSS的一種語法,用來控制頁面元素的動態行為。偽類使得我們可以在HTML文檔中定義一些特殊的狀態,然后在CSS中應用這些狀態。其中,偽類做動畫是一種常用的技巧。
/* 偽類做動畫 */ a:hover{ transition: all ease 0.5s; color: #ff0000; }
上面代碼中,a:hover表示鼠標懸停在鏈接上時,觸發下面的動畫效果。transition是CSS3提供的動畫規則,其中all表示所有的屬性都做動畫;ease表示緩動效果;0.5s表示動畫過渡時間,也可以設置成其他值。
除了:hover,CSS還有其他偽類做動畫。比如,當用戶點擊一個按鈕時,按鈕的樣式發生變化,可以用下面的代碼實現:
/* 偽類做動畫 */ button:active{ background-color: #00ff00; transform: translateY(4px); }
這里使用:active偽類,表示用戶激活按鈕時,觸發下面的動畫效果。background-color表示背景顏色變為綠色;transform表示按鈕往下移動4像素。
除了:hover和:active,CSS還有其他偽類可以用來做動畫,比如:focus、:first-child、:last-child等等。只要深入學習CSS偽類,就可以實現更加復雜的動畫效果。
上一篇css偽類使用實例