6

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

http://thedrivepartnership.com/index.html

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

4

5 回答 5

5

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

例如，您可以在文件顶部放置一个包含动画的容器，该容器具有非常低的 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 的动画。

我整理了一个基本示例，说明如何使用 css 和 html 来实现。这里是全屏。我认为还有其他问题……这绝对是不完整的……但希望朝着正确的方向迈出一步。您可以将相同的方法扩展到更多齿轮，以进一步类似于您当前的页面。

如果你要走这条路（我不确定我是否推荐它），最好以在 800x600 到 1400x100 范围内看起来不错的分辨率设计动画。如果您有统计信息，请按用户最常见的窗口大小。

于 2011-11-24T18:06:29.460 回答
2

在 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;
}
于 2011-11-24T12:28:17.310 回答
0

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

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

于 2011-11-24T12:08:52.030 回答
0

旋转是一种 2D 变换，因此类似于：

.cog {
    height: 100px; width: 100px;
    transform: rotate(180deg);
    animation-duration: 10s;
}
于 2011-11-24T12:20:54.153 回答
-1

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

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

于 2014-07-07T01:17:49.083 回答