纯CSS3实现滚动的齿轮动画效果

Tyne ·
更新时间:2024-11-13
· 885 次阅读

纯CSS写的齿轮效果。支持chrome,firefox,比较粗糙。各位见谅,希望你能看到的是思想,而不是技术的东西。

效果预览:

原理的话也比较简单,主要是css3画圆,然后弄出几个轮子的齿(这里构建锯齿的方法是我个人比较满意的地方,就是用一个贯穿整个圆形的长条,然后transform:rotate一定的度数,然后按照规律写下去,一个轮子就出来了。如果结合js做的话,能做到更多更精细的效果),然后画出两个轮子。用keyframes(关键帧)给出动画效果。一个顺时针一个逆时针,设置好滚动时间,并无限滚动(infinite)。ok,告一段落。看下面效果:


提示:您可以先修改部分代码再运行

主要用到了transform进行旋转,keyframes关键帧效果。本来打算写个复杂的联动齿轮的,不过实在是懒得折腾了。哪位童鞋写好后在这里吱一声吧。。。



动画 CSS CSS3 齿轮

需要 登录 后方可回复, 如果你还没有账号请 注册新账号