欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-12-01 11:39:05
这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转,keyframes关键帧等技术实现,需要的朋友可以参考下... 14-06-05...

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

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

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




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


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