如何使用 CSS3 和 jQuery 创建旋转齿轮？答案

【问题标题】：How do I create a rotating cog with CSS3 and jQuery?如何使用 CSS3 和 jQuery 创建旋转齿轮？
【发布时间】：2012-01-05 14:31:49
【问题描述】：

我有以下网站，它在 Flash 中，背景是旋转的齿轮：

http://thedrivepartnership.com/index.html

我想使用 CSS 和 JavaScript 创建类似的东西 - 有人知道那里的任何例子吗？

【问题讨论】：

标签： javascript jquery css animation css-shapes

【解决方案1】：

恐怕在 HTML5 的 canvas-tag 之前你需要使用 GIF 的..

编辑：从最后一个开始。请参阅：http://css-tricks.com/examples/CSS3Clock/ 这很可能会对您有所帮助。

【讨论】：

[flag] 是的，这是一个很好的把戏，一个巨大的滴答作响的时钟。但距离回答 OP 的问题还有很长的路要走。

【解决方案2】：

旋转是一种 2D 变换，所以类似于：

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

【讨论】：

【解决方案3】：

在 Chrome 中试试这个。这是特定于 webkit 浏览器、Chrome 和 Safari 的。将“-webkit”替换为 Mozilla 的“-moz”和 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;
}

【讨论】：

【解决方案4】：

我想你可以做的是创建一个填充窗口的容器，然后将你的齿轮放在那个容器中。

例如，您可以在文件顶部放置一个包含动画的容器，该容器的 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 范围内看起来不错的分辨率。如果您有统计信息，请按用户最常用的窗口大小。

【讨论】：

【解决方案5】：

你可以使用 font-awesome 的 spinning cog icon，除非你想使用自己的图片。

在您将 font-awesome 添加到项目后，可以使用 <i class="fa fa-cog"></i> 实现 font-awesome 图标。

【讨论】：