如果你正在學習Web開發,那么css動畫肯定是一個非常好的選擇,它可以讓你的網頁更加生動有趣。在這篇文章里,我們會介紹一些簡單的css動畫,希望能夠幫助你快速掌握。
/* 閃爍動畫 */ @keyframes blink{ 0%{ opacity:1 } 50%{ opacity:0 } 100%{ opacity:1 } } span{ animation:blink 1s infinite; } /* 旋轉動畫 */ @keyframes rotation{ from{ transform:rotate(0deg) } to{ transform:rotate(360deg) } } img{ animation:rotation 2s infinite; } /* 滑動動畫 */ @keyframes slide{ from{ transform:translateX(0) } to{ transform:translateX(100px) } } div{ animation:slide 1s forwards; }
上面的三個動畫都很簡單,但是對于初學者來說已經足夠了。第一個是閃爍動畫,它是通過改變透明度來實現的。我們使用了@keyframes定義了一個動畫,然后通過animation屬性將它綁定到span標簽上。
第二個是旋轉動畫,我們使用了transform:rotate屬性來實現。同樣地,我們使用了@keyframes定義了一個動畫,然后將它綁定到img標簽上。
最后一個是滑動動畫,它是通過transform:translateX屬性來實現的。我們同樣使用了@keyframes定義了一個動畫,然后通過animation屬性將它綁定到div標簽上。而在animation屬性中我們設置了forwards,這將使得動畫停止后保留最后的狀態,也就是最后滑動到的位置。
以上就是三個簡單的css動畫,你可以根據這些代碼嘗試一下不同的屬性和值來創建不同的動畫效果。
上一篇純css多級級下拉菜單
下一篇用css畫精靈球