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

讓客戶(hù)滿(mǎn)意是我們工作的目標(biāo)，不斷超越客戶(hù)的期望值來(lái)自于我們對(duì)這個(gè)行業(yè)的熱愛(ài)。我們立志把好的技術(shù)通過(guò)有效、簡(jiǎn)單的方式提供給客戶(hù)，將通過(guò)不懈努力成為客戶(hù)在信息化領(lǐng)域值得信任、有價(jià)值的長(zhǎng)期合作伙伴，公司提供的服務(wù)項(xiàng)目有：國(guó)際域名空間、虛擬主機(jī)、營(yíng)銷(xiāo)軟件、網(wǎng)站建設(shè)、梅縣網(wǎng)站維護(hù)、網(wǎng)站推廣。

css設(shè)置圖片不停旋轉(zhuǎn)的方法：可以通過(guò)使用animation屬性和transform屬性來(lái)進(jìn)行設(shè)置，如【-webkit-transform: rotate(360deg);animation: rotation;】。

相關(guān)屬性：

animation動(dòng)畫(huà)屬性

animation: name duration timing-function delay iteration-count direction fill-mode play-state;

屬性值：

• animation-name    指定要綁定到選擇器的關(guān)鍵幀的名稱(chēng)

• animation-duration    動(dòng)畫(huà)指定需要多少秒或毫秒完成

• animation-timing-function    設(shè)置動(dòng)畫(huà)將如何完成一個(gè)周期

• animation-delay    設(shè)置動(dòng)畫(huà)在啟動(dòng)前的延遲間隔。

• animation-iteration-count    定義動(dòng)畫(huà)的播放次數(shù)。

• animation-direction    指定是否應(yīng)該輪流反向播放動(dòng)畫(huà)。

• animation-fill-mode    規(guī)定當(dāng)動(dòng)畫(huà)不播放時(shí)（當(dāng)動(dòng)畫(huà)完成時(shí)，或當(dāng)動(dòng)畫(huà)有一個(gè)延遲未開(kāi)始播放時(shí)），要應(yīng)用到元素的樣式。

• animation-play-state    指定動(dòng)畫(huà)是否正在運(yùn)行或已暫停。

• initial    設(shè)置屬性為其默認(rèn)值。

• inherit    從父元素繼承屬性。

Transform屬性應(yīng)用于元素的2D或3D轉(zhuǎn)換。這個(gè)屬性允許你將元素旋轉(zhuǎn)，縮放，移動(dòng)，傾斜等。

transform: none|transform-functions;

屬性值：

• none    定義不進(jìn)行轉(zhuǎn)換。

• matrix(n,n,n,n,n,n)    定義 2D 轉(zhuǎn)換，使用六個(gè)值的矩陣。

• matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)    定義 3D 轉(zhuǎn)換，使用 16 個(gè)值的 4x4 矩陣。

• translate(x,y)    定義 2D 轉(zhuǎn)換。

• translate3d(x,y,z)    定義 3D 轉(zhuǎn)換。

代碼實(shí)現(xiàn)：

html代碼：

<div class="demo">
    <img class="an img" src="/test/img/2.png" width="500" height="500"/>
</div>

旋轉(zhuǎn)代碼：

.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;}

實(shí)現(xiàn)效果：

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享css設(shè)置圖片不停旋轉(zhuǎn)的方法內(nèi)容對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，遇到問(wèn)題就找創(chuàng)新互聯(lián)，詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!

網(wǎng)站標(biāo)題：css設(shè)置圖片不停旋轉(zhuǎn)的方法
標(biāo)題網(wǎng)址：http://www.chinadenli.net/article48/jcocep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、網(wǎng)站改版、標(biāo)簽優(yōu)化、搜索引擎優(yōu)化、微信小程序、

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)