在CSS中,我們可以使用以下代碼來設置一個標簽不停旋轉:
.rotate { animation-name: rotate; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: linear; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
這段代碼包含兩部分:
1. 設置class名為“rotate”的標簽樣式,其中:
- animation-name指定要使用的動畫名稱,這里指定名稱為“rotate”
- animation-duration指定動畫運行的時間,這里指定為2秒
- animation-iteration-count指定動畫運行的次數,這里指定為無限次
- animation -timing-function指定動畫的時間曲線,這里指定線性
2. 使用@keyframes規則定義“rotate”動畫:從旋轉0度到360度。
此代碼使用CSS3動畫屬性,包括animation-name,animation-duration,animation-iteration-count和animation-timing-function。
要使標簽一直旋轉,請將animation-iteration-count設置為infinite。