纯CSS3完成翻转的齿轮动漫实际效果

日期：2021-03-07 类型：科技新闻我要分享

关键词：快速建站，网站建设系统，免费网页建站，网站免费建设，建站系统

纯CSS写的齿轮实际效果。适用chrome，firefox，较为不光滑。各位见谅，期待你能看到的是观念，而并不是技术性的物品。

实际效果预览：

基本原理的话也较为简易，关键是css3画圆，随后弄出几个轮子的齿（这里搭建锯齿的方式是我本人较为令人满意的地区，便是用1个贯穿全部圆形的长条，随后transform:rotate1定的度数，随后依照规律性写下去，1个轮子就出来了。假如融合js做的话，能保证更多更细致的实际效果），随后画出两个轮子。用keyframes(重要帧)得出动漫实际效果。1个顺时针1个逆时针，设定好翻转時间，并没有限翻转（infinite）。ok，告1段落。看下面实际效果:

<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf⑻"/><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:⑴3px;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:⑴4px;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(⑴80deg);} 100%{-webkit-transform:rotate(⑶60deg);}}@-moz-keyframes slide2{ 0%{-moz-transform:rotate(0deg);} 50%{-moz-transform:rotate(⑴80deg);} 100%{-moz-transform:rotate(⑶60deg);}}</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重要帧实际效果。原本准备写个繁杂的联动齿轮的，但是确实是懒得折腾了。哪位童鞋写好后在这里吱1声吧。。。

上一篇：CSS操纵2级菜单动态性出現不仅有js才可以保证返回下一篇：没有了