如何使用CSS3和jQuery创建旋转齿轮？
[英]How do I create a rotating cog with CSS3 and jQuery?
问题描述
I have the following site which is in Flash with rotating cogs in the background: 
我有以下站点，它在Flash中，后台有旋转齿轮：
http://thedrivepartnership.com/index.html http://thedrivepartnership.com/index.html
I would like to create something similar using CSS and JavaScript - does any one know of any examples out there? 我想用CSS和JavaScript创建类似的东西 - 有没有人知道那里的任何例子？
5 个解决方案
解决方案1
5 已采纳 2011-11-24 18:06:29
I suppose what you could do is create a container which fills the window, then place your gears in that container. 我想你能做的就是创造一个填充窗户的容器，然后将你的齿轮放在那个容器里。
For example, you might place a container holding the animation in the top of the file with a very low z-index which fits the window and has a fixed position. 例如，您可以将包含动画的容器放在文件顶部，其中z-index非常低，适合窗口并具有固定位置。 You'd place your content on top and pretend css4 just came out with support for .avi backgrounds. 你把你的内容放在首位，并假装css4刚出来支持.avi背景。 Just kidding. 开玩笑。 Code: 码：
<body>
<div id="cogs">
// Your awesome cog pictures
</div>
<div id="content">
// Your awesome content
</div>
</body>
The css for the animation container might look like this: 动画容器的CSS可能如下所示：
#cogs {
width: 100%;
height: 100%;
position: fixed;
text-align: center;
overflow: hidden;
z-index: -100;
}
The css based animation works like this, but with varied vendor prefixes: 基于CSS的动画的工作方式与此类似，但具有不同的供应商前缀：
@keyframes rotateCogOne {
0% {
-webkit-transform:rotate(0deg);
}
100% {
-webkit-transform:rotate(360deg);
}
}
And then you apply the animation like so: 然后你像这样应用动画：
#cogOne {
animation: rotateCogOne 60s infinite linear;'
// which means...
animation: [name], [duration], [repeat], [easing]
}
Without scripting an animation within a canvas element, I think you're going to be pretty limited. 如果没有在canvas元素中编写动画脚本，我认为你会非常有限。 Particularly, scaling the animation to fit different resolutions will be difficult (Impossible?) with strict css and html. 特别是，使用严格的css和html缩放动画以适应不同的分辨率将是困难的（不可能吗？）。 It can still look cool though, so maybe it still meets your needs. 它仍然看起来很酷，所以它可能仍然满足您的需求。 Also, where animation isn't supported, you can still have a cool array of gears in the background, or simply fall back to javascript-based animation. 此外，在不支持动画的情况下，您仍然可以在后台拥有一个很酷的齿轮阵列，或者简单地回归到基于javascript的动画。
I've thrown together a basic example of how you could do it with css and html. 我把一个基本的例子放在一起，你可以用css和html做到这一点。 Here it is full screen . 这是全屏 。 There are further issues I think... This is definitely incomplete... But hopefully a step in the right direction. 我认为还有其他问题......这绝对是不完整的...但希望朝着正确的方向迈出一步。 You could extend the same methods to more gears to further resemble your current page. 您可以将相同的方法扩展到更多齿轮，以进一步类似于当前页面。
If you were to take this route (And I'm not sure I recommend it), it would be best to design the animation at a resolution that looked good in a range around 800x600 up to perhaps 1400x100. 如果你采取这种方式（而且我不确定我推荐它），最好设计一个在800x600到1400x100范围内看起来很好的分辨率的动画。 If you have stats, go by your users' most common window size. 如果您有统计信息，请按用户最常用的窗口大小进行操作。
解决方案2
2 2011-11-24 12:28:17
Try this in Chrome. 在Chrome中尝试此操作。 This is specific for webkit browsers, Chrome and Safari. 这适用于webkit浏览器，Chrome和Safari。 Replace "-webkit" with "-moz" for Mozilla and "-o" for Opera. 将“-webkit”替换为“-moz”替换为Mozilla，将“-o”替换为Opera。 Or just remove it for newest browser versions. 或者只是删除它以获得最新的浏览器版本。
.cog{
-webkit-animation-name: spin;
-webkit-animation-duration: 60000ms;
-webkit-animation-iteration-count: infinite;
-webkit-animation-direction: normal;
-webkit-animation-timing-function: linear;
}
or 要么
.cog{
animation-name: spin;
animation-duration: 60000ms;
animation-iteration-count: infinite;
animation-direction: normal;
animation-timing-function: linear;
}
解决方案3
0 2011-11-24 12:08:52
I'm afraid that before HTML5's canvas-tag you'll need to use GIF's.. 我担心在HTML5的canvas-tag之前你需要使用GIF ..
EDIT: Scratch the last one.. See: http://css-tricks.com/examples/CSS3Clock/ This will most probably help you. 编辑：抓住最后一个..请参阅： http ： //css-tricks.com/examples/CSS3Clock/这很可能会帮助你。
解决方案4
0 2011-11-24 12:20:54
Rotating is a 2D transform, so something like: 旋转是2D变换，所以类似于：
.cog {
height: 100px; width: 100px;
transform: rotate(180deg);
animation-duration: 10s;
}
解决方案5
-1 2014-07-07 01:17:49
You could use font-awesome's spinning cog icon , unless you want to use your own images. 您可以使用font-awesome的旋转齿轮图标 ，除非您想使用自己的图像。
The font-awesome icon can be implemented with <i class="fa fa-cog"></i> after you have added font-awesome to your project. 在将font-awesome添加到项目后，可以使用<i class="fa fa-cog"></i>实现font-awesome图标。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.