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

程序员文章站 2022-05-07 19:28:31

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

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

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

原理的话也比较简单，主要是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关键帧效果。本来打算写个复杂的联动齿轮的，不过实在是懒得折腾了。哪位童鞋写好后在这里吱一声吧。。。

上一篇：导出2

下一篇： oracle数据库导入导出命令

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

一款纯css3实现的动画按钮_html/css_WEB-ITnose

CSS3结合jQuery实现动画效果及回调函数的实例

基于纯 CSS3 技术实现美观的标签云效果_html/css_WEB-ITnose

一款纯css3实现的动画按钮_html/css_WEB-ITnose

一款纯css3实现的超炫动画背画特效_html/css_WEB-ITnose

css3实现的动画效果_html/css_WEB-ITnose

基于CSS3的animation属性实现微信拍一拍动画效果

利用CSS3 animation动画属性实现轮播图效果的方法详解

一款纯css3实现的机器人看书动画效果_html/css_WEB-ITnose

一款利用纯css3实现的win8加载动画的实例分析