HTML绘制齿轮,使用css3制作齿轮loading动画效果

HTML

首先在页面中引入font-awesome文件。

然后在放置动画的位置加上HTML结构：

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); }

}