CSS動畫是網頁中常見的一種交互方式,它可以添增頁面的生動性和吸引力。但是,在許多情況下,我們需要讓動畫不停止,不斷地旋轉或移動。下面是一些實現這種效果的方法。
方法一:使用動畫關鍵幀 .spin { /* 設置動畫的基本屬性 */ animation: spin 2s linear infinite; } @keyframes spin { /* 定義動畫每個關鍵幀的狀態 */ from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
這段代碼定義了一個名為.spin的類,在其中定義動畫的基本屬性,指定了一個名為spin的動畫,它用于不停止地旋轉,這將使一個元素旋轉360度,持續兩秒鐘。
如果需要控制旋轉的速度,可以修改動畫的基本屬性。比如,把spin的時間改為1秒鐘,就會讓旋轉變得更快。
.spin { /* 設置動畫的基本屬性 */ animation: spin 1s linear infinite; }
方法二:使用transform屬性
.spin2 { transform: rotate(360deg) infinite linear; }
這段代碼中,我們使用transform屬性,將元素旋轉360度,然后使用infinite關鍵字來讓旋轉永遠不停止,使用linear來保持轉速一致。
通過這兩種方法,我們可以實現不停止轉動的效果,以達到更好的頁面效果。同時,它們也提供了更大的靈活性,因為它們可以針對不同的元素和不同的情況來調整。