CSS是一種用于設計網頁樣式的語言,除了可以設置字體、顏色、背景等基本樣式,它還能夠實現炫酷的動畫效果。
/* CSS代碼:左右晃動的DIV */ div{ position: relative; left: 0; animation: sway 1s infinite alternate ease-in-out; } @keyframes sway { from { transform: translateX(0);} to { transform: translateX(20px);} }
在上面的代碼中,我們使用了CSS3的動畫屬性animation和關鍵幀@keyframes來實現左右晃動的效果。這里的動畫屬性有四個參數,分別是動畫名稱、動畫持續時間、動畫延遲時間和動畫方式。@keyframes則是用來定義CSS動畫的關鍵幀,包括動畫開始和結束的狀態。
/* CSS代碼:旋轉的按鈕 */ button{ width: 50px; height: 50px; border-radius: 50%; background-color: #f4280a; position: relative; animation: rotate 1s infinite; } button:before{ content: ""; display: block; width: 30px; height: 30px; position: absolute; top: 50%; left: 50%; margin-top: -15px; margin-left: -15px; border-radius: 50%; background-color: #fff; animation: scale-in 1s infinite; } @keyframes rotate { from { transform: rotate(0);} to { transform: rotate(360deg);} } @keyframes scale-in { 0% { transform: scale(0); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } }
這段代碼實現了一個旋轉的按鈕,按鈕動畫效果包括旋轉和放大。我們使用偽元素:before來定義按鈕里的圓圈,并且在該元素上實現放大動畫。@keyframes中的scale-in則是實現了從0到1.2再到1的緩慢放大動畫的效果。
更多CSS動畫,可以使用transform、transition、perspective等屬性來實現。