如何使用CSS3和jQuery創建旋轉齒輪？

我有以下的網站是在Flash與背景旋轉的齒輪：如何使用CSS3和jQuery創建旋轉齒輪？

http://thedrivepartnership.com/index.html

我想創建一個使用CSS和JavaScript類似的東西 - 它的任何示例任何一個知道在那裏？

2011-11-24 highchartsdude

我想你可以做的是創造出充滿窗口的容器中，然後把你的齒輪在該容器中。

例如，您可以將一個容納動畫的容器放置在文件的頂部，該文件的z-index非常低，適合窗口並且具有固定的位置。你會把你的內容放在首位，並假裝css4剛剛出來支持.avi背景。開玩笑。代碼：

<body> 
    <div id="cogs"> 
     // Your awesome cog pictures 
    </div> 
    <div id="content"> 
     // Your awesome content 
    </div> 
</body>

爲動畫容器中的CSS可能是這樣的：

#cogs { 
    width: 100%; 
    height: 100%; 
    position: fixed; 
    text-align: center; 
    overflow: hidden; 
    z-index: -100; 
}

的CSS動畫的工作原理是這樣的，但與不同的供應商前綴：

@keyframes rotateCogOne { 
    0% { 
     -webkit-transform:rotate(0deg); 
    } 
    100% { 
     -webkit-transform:rotate(360deg); 
    } 
}

然後你應用這樣的動畫：

#cogOne { 
    animation: rotateCogOne 60s infinite linear;' 
    // which means... 
    animation: [name], [duration], [repeat], [easing] 
}

如果沒有在畫布元素內編寫腳本，我認爲你會相當有限。特別是，縮放動畫以適應不同的分辨率將是困難的（不可能？）與嚴格的CSS和HTML。它仍然可以看起來很酷，所以它可能仍然能夠滿足你的需求。此外，在不支持動畫的情況下，您仍然可以在背景中使用酷炫的齒輪陣列，或者簡單地回退到基於JavaScript的動畫。

我把你扔在一起basic example你怎麼可以做到這一點與CSS和HTML。 Here it is full screen。我認爲還有更多問題......這絕對是不完整的......但希望朝着正確的方向邁出一步。您可以將相同的方法擴展到更多齒輪以進一步類似於當前頁面。

如果你要採取這種路線（我不確定我推薦它），最好是設計動畫的分辨率在800x600到1400x100之間的範圍內看起來不錯。如果您有統計信息，請轉到用戶最常用的窗口大小。

來源

2011-11-24 18:06:29

恐怕HTML5的畫布標記之前，你需要使用GIF的..

編輯：最後一次刮塗。請參見：http://css-tricks.com/examples/CSS3Clock/這將極有可能幫助你。

來源

2011-11-24 12:08:52 heikkim

[flag]是的，這是一個不錯的技巧，一個大滴答作響的時鐘。但是，對OP的問題的答案還有很長的路要走。 –

旋轉是2D變換，所以像：

.cog { 
    height: 100px; width: 100px; 
    transform: rotate(180deg); 
    animation-duration: 10s; 
}

來源

2011-11-24 12:20:54 erikkallen

在Chrome試試這個。這是特定於webkit瀏覽器，Chrome和Safari。用Mozilla的「-moz」替換「-webkit」，用Opera替換「-o」。或者只是刪除它爲最新的瀏覽器版本。

.cog{ 
    -webkit-animation-name: spin; 
    -webkit-animation-duration: 60000ms; 
    -webkit-animation-iteration-count: infinite; 
    -webkit-animation-direction: normal; 
    -webkit-animation-timing-function: linear; 
}

或

.cog{ 
    animation-name: spin; 
    animation-duration: 60000ms; 
    animation-iteration-count: infinite; 
    animation-direction: normal; 
    animation-timing-function: linear; 
}

來源

2011-11-24 12:28:17

-1

您可以使用font-awesome的spinning cog icon，除非您想使用自己的圖像。

將字體超讚添加到項目後，可以使用<i class="fa fa-cog"></i>實現字體超讚圖標。

來源

2014-07-07 01:17:49 bryce

如何使用CSS3和jQuery創建旋轉齒輪？

回答

相關問題