全屏旋轉背景圖像

我一直在尋找如何實現覆蓋整個屏幕的動畫旋轉圖像的這種效果。 Like this one。全屏旋轉背景圖像

低音，我想要的是讓它旋轉併成爲全屏。

這是我走到這一步，http://losmosca.com.ar/reiki/

HTML：

<img src="img/bg.jpg" id='test' class='rotating'>

CSS3：

#test { 
position:relative; 
margin:0 auto; 
width:1000px; 
height:1000px; 
} 

@-webkit-keyframes rotating { 
    from{ 
     -webkit-transform: rotate(0deg); 
    } 
    to{ 
     -webkit-transform: rotate(360deg); 
    } 
} 

.rotating { 
    -webkit-animation: rotating 1000s linear infinite; 
}

，你可以看到，我可以把它旋轉但不能全屏，是有可能嗎？謝謝！

來源

2013-03-26 danii

你必須提高你的圖像分辨率。 @ user2207103 – 2013-03-26 04:01:22

他們使用JavaScript而不是CSS來製作動畫。使用變換，然後使用比例/旋轉屬性。 – ahren 2013-03-26 04:04:27

使用的方式width:100%;而非width:1000px;

和height:100%而非height:1000px;

清涼效果的嘗試，我可能會找個藉口使用技巧。

來源

2013-03-26 04:07:28 apaul

我試過了，但是在旋轉時看到黑色的身體背景。 – danii 2013-03-26 04:13:55

你使用什麼瀏覽器？ – apaul 2013-03-26 04:25:33

我在Chrome中看到你在說什麼，100％在Firefox中工作。 – apaul 2013-03-26 04:28:03

全屏旋轉背景圖像

回答

相關問題