css設定圖片不停旋轉的方法:可以透過使用animation屬性和transform屬性來進行設置,如【-webkit-transform: rotate(360deg);animation: rotation;】。
本教學操作環境:windows10系統、css3版,此方法適用於所有品牌電腦。
(學習影片分享:css影片教學)
css設定圖片不停旋轉的方法:
相關屬性:
animation動畫屬性
animation: name duration timing-function delay iteration-count direction fill-mode play-state;
屬性值:
animation-name 指定要綁定到選擇器的關鍵影格的名稱
animation-duration 動畫指定需要多少秒或毫秒完成
animation-timing-function 設定動畫將如何完成一個週期
#animation-delay 設定動畫在啟動前的延遲間隔。
animation-iteration-count 定義動畫的播放次數。
animation-direction 指定是否應該輪流反向播放動畫。
animation-fill-mode 規定動畫不播放時(動畫完成時,或動畫有延遲未開始播放時),要套用到元素的樣式。
animation-play-state 指定動畫是否正在運作或暫停。
initial 設定屬性為其預設值。
inherit 從父元素繼承屬性。
Transform屬性套用於元素的2D或3D轉換。這個屬性允許你將元素旋轉,縮放,移動,傾斜等。
transform: none|transform-functions;
屬性值:
none 定義不進行轉換。
matrix(n,n,n,n,n,n) 定義 2D 轉換,並使用六個值的矩陣。
matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n) 定義3D 轉換,使用16 個值的4x4 矩陣。
translate(x,y) 定義 2D 轉換。
translate3d(x,y,z) 定義 3D 轉換。
程式碼實作:
html程式碼:
<div class="demo"> <img class="an img" src="/test/img/2.png" style="max-width:90%" style="max-width:90%"/ alt="css怎麼設定圖片不停旋轉" > </div>
旋轉程式碼:
.demo{ text-align: center; margin-top: 100px; } @-webkit-keyframes rotation{ from {-webkit-transform: rotate(0deg);} to {-webkit-transform: rotate(360deg);} } .an{ -webkit-transform: rotate(360deg); animation: rotation 3s linear infinite; -moz-animation: rotation 3s linear infinite; -webkit-animation: rotation 3s linear infinite; -o-animation: rotation 3s linear infinite; } .img{border-radius: 250px;}
實作效果:
相關推薦:CSS教學
#以上是css怎麼設定圖片不停旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!