CSS3旋轉動畫加載是一種引人注目的動態效果,可以讓網站更具吸引力。下面是一個例子:
/* 聲明旋轉動畫 */ @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* 定義加載器樣式 */ .loader { border-top: 5px solid #3498db; border-right: 5px solid transparent; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-radius: 50%; width: 50px; height: 50px; animation: spin 1s linear infinite; margin: 0 auto; } /* HTML代碼 */
上述CSS代碼中,我們定義了一個名為“spin”的旋轉動畫,從0度到360度,然后設置了“loader”類的樣式,使該元素呈現圓形,并添加旋轉動畫。最后,我們在HTML中添加了一個“loader”元素,以在頁面上顯示旋轉動畫加載。
上一篇css 單獨寫ie
下一篇css3旋轉180度