CSS中旋轉(zhuǎn)動畫是一種非常常見的動畫特效,可以通過transform屬性實現(xiàn)。下面是一個基本的css代碼示例:
div { width: 100px; height: 100px; background-color: red; transition: transform 1s; } div:hover { transform: rotate(360deg); }
上述代碼中,我們首先定義了一個100px * 100px大小的紅色div元素,并設(shè)置了transition屬性,指定動畫時長為1秒。接著,在div元素上綁定了一個:hover偽類,表示當鼠標移動到該元素上時觸發(fā)操作。具體操作就是通過transform屬性實現(xiàn)360度的旋轉(zhuǎn)效果。
注意,在實現(xiàn)css旋轉(zhuǎn)動畫時,我們可以使用多種單位,如deg、rad、turn等。另外,我們還可以通過以下方式實現(xiàn)無線旋轉(zhuǎn)效果:
div { width: 100px; height: 100px; background-color: red; animation: spin 2s linear infinite; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
上述代碼中,我們定義了一個名為spin的關(guān)鍵幀動畫,并指定動畫為線性運動。接著,在div元素上添加animation屬性,并設(shè)置動畫名稱為spin、時長為2秒、運動方式為linear、循環(huán)播放次數(shù)為無限。spin動畫的具體實現(xiàn)方式是,在0%的位置旋轉(zhuǎn)角度為0度,在100%的位置旋轉(zhuǎn)角度為360度。這樣我們就可以實現(xiàn)一個循環(huán)旋轉(zhuǎn)的動畫效果。