在HTML5中,通過使用CSS3的transform屬性可以設置圖片自動旋轉。transform屬性可以實現對元素進行2D、3D變換的效果,其中旋轉是其中一種變換效果。
/*設置圖片旋轉*/ img{ -webkit-animation:spin 4s linear infinite; -moz-animation:spin 4s linear infinite; animation:spin 4s linear infinite; } @-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } } @-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } } @keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
在代碼中使用@keyframes關鍵字定義一個名為spin的動畫,同時使用transform:rotate()將圖片旋轉360度,-webkit-transform和-moz-transform是為了保證在不同瀏覽器中的兼容性。接下來的infinite則表示動畫會無限循環播放。
通過以上代碼,就可以輕松地為網頁中的圖片添加自動旋轉的效果。當然,也可以根據需要對代碼進行調整。