css設置圖片不停旋轉的方法

這篇文章主要介紹了css設置圖片不停旋轉的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。

css設置圖片不停旋轉的方法：可以通過使用animation屬性和transform屬性來進行設置，如【-webkit-transform: rotate(360deg);animation: rotation;】。

相關屬性：

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" width="500" height="500"/>
</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設置圖片不停旋轉的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!