下午好，今天給大家分享一個(gè)css3的小動(dòng)畫(huà)
用到的屬性有css3的@keyframes
如需在 CSS3 中創(chuàng)建動(dòng)畫(huà)，需要學(xué)習(xí) @keyframes 規(guī)則。
@keyframes 規(guī)則用于創(chuàng)建動(dòng)畫(huà)。在 @keyframes 中規(guī)定某項(xiàng) CSS 樣式，就能創(chuàng)建由當(dāng)前樣式逐漸改為新樣式的動(dòng)畫(huà)效果。
寫(xiě)幾個(gè)div，然后設(shè)置一下div的透明度與大小。然后設(shè)置一個(gè)@keyframes動(dòng)畫(huà)。然后設(shè)置每一個(gè)div的animation-duration，就是延遲時(shí)間。
css如下:
html如下：
當(dāng)您在 @keyframes 中創(chuàng)建動(dòng)畫(huà)時(shí)，請(qǐng)把它捆綁到某個(gè)選擇器，否則不會(huì)產(chǎn)生動(dòng)畫(huà)效果。
通過(guò)規(guī)定至少以下兩項(xiàng) CSS3 動(dòng)畫(huà)屬性，即可將動(dòng)畫(huà)綁定到選擇器：
規(guī)定動(dòng)畫(huà)的名稱
規(guī)定動(dòng)畫(huà)的時(shí)長(zhǎng)
設(shè)置完畢之后，該動(dòng)畫(huà)即完成。
謝謝觀看山東文匯官網(wǎng)
關(guān)鍵詞:
