這是一款基于css3齒輪loading動畫特效。該特效使用font-awesome字體圖標的齒輪圖標作為圖案，通過CSS3 animation來制作三個齒輪的運動效果。
查看演示 下載源碼
HTML
首先在頁面中引入font-awesome文件。
<link href="
然后在放置動畫的位置加上HTML結構：
| <div class="container"> <div class="row"> <div class="col-md-12"> <div id="loader-wrapper"> <div id="loader1" class="fa fa-cog loader"></div> <div id="loader2" class="fa fa-cog loader"></div> <div id="loader3" class="fa fa-cog loader"></div> </div> </div> </div></div> |
CSS樣式
然后通過下面的CSS樣式來制作齒輪的動畫效果。
| #loader-wrapper { width: 60px; height: 60px; margin: auto; position: relative;}.loader{ position: absolute; }#loader1{ color: #3A4652; font-size: 35px; text-align: center; width: 35px; height: 35px; top: -20px; left: 3px; animation: animate-1 1s infinite linear;}#loader2{ color: #d72f2b; font-size: 50px; text-align: center; height: 50px; width: 50px; right: -12px; animation: animate-2 1s infinite linear;}#loader3{ color: #3A4652; font-size: 35px; text-align: center; width: 35px; height: 35px; bottom: -10px; left: 3px; animation: animate-3 1s infinite linear;}@keyframes animate-1{ 100% { transform: rotate(-180deg); }}@keyframes animate-2{ 100% { transform: rotate(180deg); }}@keyframes animate-3{ 100% { transform: rotate(-180deg); }} |
總結
以上所述是小編給大家介紹的使用css3制作齒輪loading動畫效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對錯新站長站網站的支持！
更多特效源碼可以關注小編的公眾號哦！
新聞熱點
疑難解答
