在網站設計中,有時會需要添加一些動態的效果來吸引用戶的注意力。其中,圖片旋轉的效果是非常醒目的一種。本文將介紹如何使用CSS來實現一張圖片360度無限循環旋轉。
.rotate-image { animation: rotate 3s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
首先,我們需要給需要旋轉的圖片添加一個類名,這里我們將其設為“rotate-image”。
接下來,我們在CSS中使用“@keyframes”來定義動畫效果,將其命名為“rotate”。這個動畫將會在3秒內完成一次循環。最后,我們通過“transform: rotate(360deg)”來使圖片旋轉360度。
最后,在類名中添加一個animation屬性,將“rotate”動畫應用于圖片。通過將“infinite”參數傳遞給動畫,我們可以實現圖片循環旋轉的效果。
現在,我們就成功地實現了一張圖片360度無限循環旋轉的效果。
下一篇css圖片文字切換顯示