CSS3中的圖片循環功能,是Web開發中非常常用和實用的技巧,可以通過CSS3中的一些屬性來實現。這里介紹兩種實現方式:
第一種方式是使用animation動畫屬性,具體代碼如下:
img { animation: rotate 5s linear infinite; } @keyframes rotate { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
上述代碼中img標簽通過animation屬性來調用名為rotate的動畫,動畫時間為5s,動畫效果為線性無限循環。而@keyframes就是我們定義的動畫規則,根據從0%到100%的每一個位置不斷變化實現圖片的循環效果。
第二種方式是使用transform屬性,具體代碼如下:
img { transform: rotate(0deg); animation: spin 2s linear infinite; } @keyframes spin { 100% { transform: rotate(360deg); } }
上述代碼中img標簽通過transform屬性來實現圖片的旋轉效果,初始角度為0度。通過animation屬性調用名為spin的動畫,動畫時間為2s,動畫效果為線性無限循環。@keyframes也是我們定義的動畫規則,根據從0%到100%的每一個位置不斷變化實現圖片的循環效果。
上一篇css3圖片水平居中
下一篇css3圖片毛玻璃白邊