使用css3製作齒輪loading動畫效果
摘要：
這是一款基於css3齒輪loading動畫特效。該特效使用font-awesome字型圖示的齒輪圖示作為圖案，通過CSS3 animation來製作三個齒輪的運動效果。
檢視演示
下載原始碼
HTML
首先在頁面中引入font-awesome檔...
這是一款基於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); }
}