纯CSS3实现滚动的齿轮动画效果
程序员文章站
2022-12-01 11:39:05
这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转,keyframes关键帧等技术实现,需要的朋友可以参考下... 14-06-05...
纯css写的齿轮效果。支持chrome,firefox,比较粗糙。各位见谅,希望你能看到的是思想,而不是技术的东西。
效果预览:
原理的话也比较简单,主要是css3画圆,然后弄出几个*的齿(这里构建锯齿的方法是我个人比较满意的地方,就是用一个贯穿整个圆形的长条,然后transform:rotate一定的度数,然后按照规律写下去,一个*就出来了。如果结合js做的话,能做到更多更精细的效果),然后画出两个*。用keyframes(关键帧)给出动画效果。一个顺时针一个逆时针,设置好滚动时间,并无限滚动(infinite)。ok,告一段落。看下面效果:
提示:您可以先修改部分代码再运行
主要用到了transform进行旋转,keyframes关键帧效果。本来打算写个复杂的联动齿轮的,不过实在是懒得折腾了。哪位童鞋写好后在这里吱一声吧。。。