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

小诸哥 2022-06-23 22:02:54 0

这是一款基于css3齿轮loading动画特效，使用font-awesome字体图标的齿轮图标作为图案，通过CSS3 animation来制作三个齿轮的运动效果。感兴趣的朋友跟随小编一起看看吧

这是一款基于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&quot;></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); }
}