[英]How do I create a rotating cog with CSS3 and jQuery?
我有以下站點，它在Flash中，后台有旋轉齒輪：
http://thedrivepartnership.com/index.html
我想用CSS和JavaScript創建類似的東西 - 有沒有人知道那里的任何例子？
我想你能做的就是創造一個填充窗戶的容器，然后將你的齒輪放在那個容器里。
例如，您可以將包含動畫的容器放在文件頂部，其中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]
}
如果沒有在canvas元素中編寫動畫腳本，我認為你會非常有限。 特別是，使用嚴格的css和html縮放動畫以適應不同的分辨率將是困難的（不可能嗎？）。 它仍然看起來很酷，所以它可能仍然滿足您的需求。 此外，在不支持動畫的情況下，您仍然可以在后台擁有一個很酷的齒輪陣列，或者簡單地回歸到基於javascript的動畫。
我把一個基本的例子放在一起，你可以用css和html做到這一點。 這是全屏 。 我認為還有其他問題......這絕對是不完整的...但希望朝着正確的方向邁出一步。 您可以將相同的方法擴展到更多齒輪，以進一步類似於當前頁面。
如果你采取這種方式（而且我不確定我推薦它），最好設計一個在800x600到1400x100范圍內看起來很好的分辨率的動畫。 如果您有統計信息，請按用戶最常用的窗口大小進行操作。
在Chrome中嘗試此操作。 這適用於webkit瀏覽器，Chrome和Safari。 將“-webkit”替換為“-moz”替換為Mozilla，將“-o”替換為Opera。 或者只是刪除它以獲得最新的瀏覽器版本。
.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;
}
我擔心在HTML5的canvas-tag之前你需要使用GIF ..
編輯：抓住最后一個..請參閱： http ： //css-tricks.com/examples/CSS3Clock/這很可能會幫助你。
旋轉是2D變換，所以類似於：
.cog {
height: 100px; width: 100px;
transform: rotate(180deg);
animation-duration: 10s;
}
您可以使用font-awesome的旋轉齒輪圖標 ，除非您想使用自己的圖像。
在將font-awesome添加到項目后，可以使用<i class="fa fa-cog"></i>實現font-awesome圖標。
我該如何在jquery或javascript中創建旋轉圖像？
[英]How do I create rotating images in jquery or javascript like this one?
如何為CSS框陰影深度設置動畫（使用jQuery或CSS3過渡）？
[英]How do I animate CSS box-shadow depth (with jQuery or CSS3 transitions)?
為什么[my] CSS3 / jQuery轉換得如此不完美，如何使它們更加流暢？
[英]Why are [my] CSS3/jQuery transitions so imperfectly smooth, and how do I make them more smooth?
如何使用 HTML5、CSS3、Javascript/Jquery 單擊此導航欄跟蹤項？
[英]How do I make this navigation bar track item clicked with HTML5, CSS3, Javascript/Jquery?
如何在第一次迭代（而不是第二次）上反轉CSS3動畫
[英]How do i reverse a CSS3 animation on the first iteration (and not the second)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.