CSS3作為一種新的規范,帶來了很多新的特性和效果,其中旋轉動畫是其中一個非常常用和實用的功能。下面我們將介紹如何使用CSS3制作一個簡單的旋轉動畫。
/* CSS代碼 */ .rotate { animation: rotate 2s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
如上所示,我們使用了CSS的animation屬性來聲明動畫,然后定義了一個名為“rotate”的關鍵幀動畫。在@keyframes中我們定義了從0度旋轉到360度旋轉的動畫效果。這里我們使用了transform的rotate函數來實現旋轉的效果。
最后,我們在需要使用旋轉動畫的元素上添加.rotate類即可。例如,如果我們想讓一個元素在頁面中不停地旋轉,那么我們可以按如下方式使用:
Hello World!
這樣我們就可以在頁面上看到一個不停旋轉的“Hello World!”。
上一篇js仿vue
下一篇js怎么和vue結合