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

ttx9n · 发表于 2014-6-5 21:56:54

这篇文章主要介绍了纯CSS3实现滚动的齿轮动画效果,主要用了transform进行旋转，keyframes关键帧等技术实现,需要的朋友可以参考下

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

效果预览：

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

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>齿轮</title> <style> html,body{margin:0;padding:0;width:100%;} #wrap{margin:0;padding:150px;} .post{width:100px;height:100px;background:#0099ff;border-radius:200px;display:block;position:relative;} .post span{width:126px;height:16px;display:inline-block;background:#0099ff;position:absolute;top:42px;left:-13px;border-radius:5px;} .s1{-webkit-transform:rotate(0deg);-moz-transform:rotate(0deg);} .s2{-webkit-transform:rotate(30deg);-moz-transform:rotate(30deg);} .s3{-webkit-transform:rotate(60deg);-moz-transform:rotate(60deg);} .s4{-webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);} .s5{-webkit-transform:rotate(120deg);-moz-transform:rotate(120deg);} .s6{-webkit-transform:rotate(150deg);-moz-transform:rotate(150deg);} .y1{width:60px;height:60px;left:80px;top:0px;} .y1 span{width:88px;height:8px;display:inline-block;background:#0099ff;position:absolute;top:26px;left:-14px;border-radius:8px;} .y0{-webkit-animation-name:slide1;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide1;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;} @-webkit-keyframes slide1{ 0%{-webkit-transform:rotate(0deg);} 50%{-webkit-transform:rotate(180deg);} 100%{-webkit-transform:rotate(360deg);} } @-moz-keyframes slide1{ 0%{-moz-transform:rotate(0deg);} 50%{-moz-transform:rotate(180deg);} 100%{-moz-transform:rotate(360deg);} } .y1{-webkit-animation-name:slide2;-webkit-animation-duration:10s;-webkit-animation-iteration-count:infinite;-webkit-animation-timing-function:linear;-moz-animation-name:slide2;-moz-animation-duration:10s;-moz-animation-iteration-count:infinite;-moz-animation-timing-function:linear;} @-webkit-keyframes slide2{ 0%{-webkit-transform:rotate(0deg);} 50%{-webkit-transform:rotate(-180deg);} 100%{-webkit-transform:rotate(-360deg);} } @-moz-keyframes slide2{ 0%{-moz-transform:rotate(0deg);} 50%{-moz-transform:rotate(-180deg);} 100%{-moz-transform:rotate(-360deg);} } </style> </head> <body> <div id="wrap"> <div class="post y0"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span> <span class="s6"></span> </div> <div class="post y1"> <span class="s1"></span> <span class="s2"></span> <span class="s3"></span> <span class="s4"></span> <span class="s5"></span> <span class="s6"></span> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行

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

z80vh · 发表于 2022-8-14 21:10:33

啪啪啪生怕PSP怕

平平安安 · 发表于 2022-8-24 23:40:33

老衲笑纳了

Alisaliu · 发表于 2022-8-26 09:19:17

还有人在不。。。。。。。。。。啊

qwe520 · 发表于 2022-9-5 21:27:57

看看看咋么

do827261756 · 发表于 2022-9-14 18:54:51

感谢楼主分享

lsc54 · 发表于 2022-10-17 03:53:48

我要金豆金豆金豆

.l4 · 发表于 2022-12-22 12:24:57

管灌灌灌灌灌灌灌灌灌灌

btbhs8t · 发表于 2023-3-1 23:03:57

怕怕怕怕怕怕怕怕怕怕怕怕怕怕

qwe520 · 发表于 2023-7-21 11:28:37

给爸爸爸爸爸爸爸爸爸爸八佰伴八佰伴

账号		自动登录	找回密码
密码			立即注册

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

相关帖子