使用css3制作齿轮loading动画效果
发布时间：2018-09-27 08:44:24 作者：佚名 
我要评论
我要评论这是一款基于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动画效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
更多特效源码可以关注小编的公众号哦！
相关文章
这篇文章主要介绍了CSS 实现各种 Loading 效果附带解析过程,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-02-19
这篇文章主要介绍了CSS loading效果之 吃豆人的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习2019-09-09
这篇文章主要介绍了CSS3动画之DIY Loading动画的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-12-27
CSS的animation可以做出大多数的loading效果，今天脚本之家小编给大家带来了基于CSS实现一个简单loading动画效果，非常不错，需要的朋友参考下吧2018-04-17
本篇文章主要介绍了一份纯CSS loading效果代码示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-16
这篇文章主要介绍了用纯CSS实现饼状Loading等待图效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-23- 这篇文章主要介绍了使用CSS时间打点的Loading效果的教程,分别是基于box-shadow和基于border+background的两种实现方法,需要的朋友可以参考下2015-06-08
- 这篇文章主要为大家介绍了css实现叶子形状loading效果的方法,通过修改border-radius的参数实现的该效果,非常具有实用价值,需要的朋友可以参考下2015-01-30
现如今网页越来越趋近于动画，相信大家平时浏览网页或多或少都能看到一些动画效果，今天我们来做一个有意思的动画效果，纯 css 实现 loading 加载中（多种展现形式），下面2023-02-08
最新评论