純CSS3實現滾動的齒輪動畫效果

2024-07-11 08:53:30

字體：大中小

來源：轉載

供稿：網友

純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關鍵幀效果。本來打算寫個復雜的聯動齒輪的，不過實在是懶得折騰了。哪位童鞋寫好后在這里吱一聲吧。。。

上一篇：絕對定位的元素在ie6下不顯示隱藏了的有效解決方法

下一篇：一個關于css中margin-right沒有效果的問題