我有以下网站，它在 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 的动画是这样工作的，但是有不同的 vendor 前缀:
@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 的动画。
我拼凑了一个 basic example如何使用 css 和 html 来实现。 Here it is full screen .我认为还有其他问题……这绝对是不完整的……但希望是朝着正确方向迈出的一步。您可以将相同的方法扩展到更多齿轮，以进一步类似于您的当前页面。
如果您要采用这种方式(我不确定我是否推荐这种方式)，最好以 800x600 到 1400x100 左右的分辨率设计动画。如果您有统计数据，请按照用户最常用的窗口大小进行统计。
关于javascript - 如何使用 CSS3 和 jQuery 创建旋转齿轮？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8256765/