CSS動畫非常酷。他們能夠幫助網站更加生動地展示主題。讓我們來看看如何使用 CSS 將圖片轉圈:
.img { width: 100px; height: 100px; background: url('circle.png'); animation: rotate 1s linear infinite; } @keyframes rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
在這里,我們使用了.img
類為我們的圖像設置了樣式屬性。我們設置了寬度、高度、以及背景圖像。接著,在animation
屬性中,我們使用了 CSS 動畫屬性,包括動畫名稱、時間、動畫變化類型和動畫的重復次數。
然后,我們使用了@keyframes
屬性來定義動畫的關鍵幀。我們將圖片從 0 度旋轉到 360 度。
這樣,你就可以用 CSS 創建一個很棒的旋轉效果啦!