CSS3提供了很多新奇的動畫效果,其中無限旋轉效果也是常用的動畫之一。下面我們來了解一下CSS3無限旋轉的實現方法。
/*旋轉動畫*/ @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /*無限旋轉*/ .rotating { animation: rotate infinite 2s linear; }
上述代碼中,我們定義了一個名為rotate的CSS3動畫,從0度旋轉到360度。接著,我們定義了一個名為.rotating的類,將旋轉動畫應用于這個類中,同時設置了無限循環和2秒線性動畫效果。
對于需要使用無限旋轉效果的元素,只需要為其添加.rotating類即可實現無限旋轉效果。
需要注意的是,不同瀏覽器可能對CSS3的支持程度不同,因此在實現CSS3動畫效果時,需要針對各種瀏覽器進行兼容性處理。
上一篇css 單元格橫向增長
下一篇css 半圓弧度