CSS3 的邊旋轉邊移動動畫,可以為網站添加豐富的動態效果,增強用戶體驗。下面我們來簡單介紹一下實現方法。
.box { width: 100px; height: 100px; background-color: #f00; position: relative; animation: move_rotate 2s linear infinite; } @keyframes move_rotate { 0% { transform: rotate(0deg) translate(0, 0); } 50% { transform: rotate(180deg) translate(100px, 0); } 100% { transform: rotate(360deg) translate(0, 0); } }
上述代碼中,我們定義了一個方塊,通過 transform 屬性控制旋轉和移動。其關鍵幀動畫(@keyframes)名為 move_rotate,關鍵幀分別為 0%、50%、100%。這里我們讓方塊從初始位置向右移動 100px,然后繞著中心點旋轉 180 度,再回到原來位置。
另外,我們使用了 animation 屬性來指定動畫效果。其中的參數包括動畫名字,持續時間、時間函數和動畫次數。這里我們讓動畫一直重復,直到頁面被關閉。
以上就是使用 CSS3 實現邊旋轉邊移動的簡單介紹。通過不同的實現方式,可以讓動畫效果更加復雜和炫酷。希望讀者可以在實踐中探索出更多創新的動態效果。