CSS3動畫是一種非常有趣的技術,它可以讓我們在網頁中展現出各種各樣的動態效果。下面我們來介紹一下如何使用CSS3完成動畫效果。
/*首先我們需要定義一個class*/ .animation{ width:100px; /*元素寬度*/ height: 100px; /*元素高度*/ background-color: #0077FF; /*元素顏色*/ animation: animation 2s infinite; /*動畫屬性:名字、時間、循環*/ } /*接下來定義動畫的具體實現*/ @keyframes animation{ /*動畫名字*/ 0%{ /*動畫的開始狀態*/ transform: scale(1); /*元素未發生變化*/ } 50%{ /*動畫中間狀態*/ transform: scale(1.2); /*元素放大1.2倍*/ } 100%{ /*動畫結束狀態*/ transform: scale(1); /*元素恢復原來的大小*/ } }
上述代碼實現了一個從原始大小、到放大、再到原始大小的動畫效果。我們可以通過改變動畫屬性的值來實現不同效果。比如,我們將上面的循環次數改為兩次,就可以讓動畫只執行兩次。
/*修改代碼*/ .animation{ width:100px; height: 100px; background-color: #0077FF; animation: animation 2s 2; /*修改動畫循環次數*/ }
使用CSS3動畫可以讓網頁更加生動有趣,但需要注意的是,過多的動態效果可能會影響頁面的加載速度。因此,在使用CSS3動畫時,要適量使用,盡量減小對頁面加載速度的影響。