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

当前位置 : 首页 > 网页制作 > CSS > 纯CSS3实现滚动的齿轮动画效果

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

来源: 作者: 时间:2015-10-31 10:17
这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转,keyframes关键帧等技术实现,需要的朋友可以参考下
这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转,keyframes关键帧等技术实现,需要的朋友可以参考下

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

效果预览:

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




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


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

Tag:
网友评论

<