使用css3制作齿轮loading动画效果
小诸哥
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"></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动画效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!
标签:
制作齿轮
loading
版权声明:本站所有图片/内容除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!