首頁 > web前端 > css教學 > css怎麼設定圖片不停旋轉

css怎麼設定圖片不停旋轉

王林
發布: 2020-11-30 14:15:44
原創
7887 人瀏覽過

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

css怎麼設定圖片不停旋轉

本教學操作環境: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教學

#

以上是css怎麼設定圖片不停旋轉的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板