hig*_*ude 6 javascript jquery animation css3 css-shapes
我有以下站点,它在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范围内看起来很好的分辨率的动画.如果您有统计信息,请按用户最常用的窗口大小进行操作.