CSS3是一種能夠美化網頁的語言,其中過渡和動畫效果是被廣泛使用的。以下是CSS3過渡和動畫效果的簡單說明。
/* 過渡效果 */ div{ transition: all 1s; /* 定義過渡屬性 */ } div:hover{ background-color: red; /* 當鼠標懸停時改變背景顏色 */ } /* 動畫效果 */ @keyframes example{ from{ /* 定義動畫效果開始的狀態 */ transform: rotate(0deg); } to{ /* 定義動畫效果結束的狀態 */ transform: rotate(360deg); } } div{ animation: example 2s infinite; /* 執行動畫效果,并無限重復 */ }
過渡效果可以平滑地改變某些屬性,例如改變顏色、大小、位置等。使用transition屬性定義過渡效果,可以控制何時開始、持續多長時間以及如何改變屬性。
動畫效果可以讓元素移動、旋轉、縮放等。使用@keyframes定義動畫,定義動畫開始和結束的狀態,然后使用animation屬性執行動畫,并控制動畫多長時間、是否循環等。
過渡效果和動畫效果都可以通過CSS3的transform屬性實現。此外,還可以使用其他屬性如opacity、rotate、scale等來實現更多效果。