传智博客
快捷导航
蚂蚁部落
蚂蚁部落 网站首页 实例代码 CSS3实例 查看内容

css3齿轮转动效果

2017-11-1 21:43| 发布者: admin| 查看: 93| 评论: 0|来自: 蚂蚁部落

本章节分享一段代码实例,它是纯css实现,能够实现齿轮咬合转到效果。

代码如下:

[HTML] 纯文本查看 复制代码运行代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style type="text/css">
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>

鲜花

握手

雷人

路过

鸡蛋

最新评论

关于我们|手机版|小黑屋| ( 鲁ICP备10022556号-3 )

GMT+8, 2017-11-19 20:23 , Processed in 0.069589 second(s), 22 queries .

Powered by Discuz! X3.2 Licensed

Copyright © 2012-2017 Design: 蚂蚁部落

返回顶部