[英]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.