本文作者:DurkBlue

css3如何制作圆角齿轮动画的教程

DurkBlue 2019-12-12 1617 抢沙发
css3如何制作圆角齿轮动画的教程摘要: CSS3做点简易动画还不错,复杂的既耗时也哗众取宠。今天教大家制作圆角齿轮动画,把代码发出来,效果如下:Markup<!DOCTYPE html><ht...

CSS3做点简易动画还不错,复杂的既耗时也哗众取宠。今天教大家制作圆角齿轮动画,把代码发出来,效果如下:

Markup
<!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>



此篇文章由DurkBlue发布,转载一下需要注明来处
文章投稿或转载声明

来源:DurkBlue版权归原作者所有,转载请保留出处。本站文章发布于 2019-12-12
温馨提示:文章内容系作者个人观点,不代表DurkBlue博客对其观点赞同或支持。

赞(0)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏

阅读
分享

发表评论取消回复

快捷回复:
AddoilApplauseBadlaughBombCoffeeFabulousFacepalmFecesFrownHeyhaInsidiousKeepFightingNoProbPigHeadShockedSinistersmileSlapSocialSweatTolaughWatermelonWittyWowYeahYellowdog

评论列表 (暂无评论,1617人围观)参与讨论

还没有评论,来说两句吧...