内容简介:这是一款基于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动画效果》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 数据齿轮(DataGear)数据库管理系统 1.1 版本发布
- DataGear 1.2.0 发布,数据齿轮数据库管理系统
- 数据齿轮(DataGear)数据库管理系统 v1.0 版本发布
- 数据齿轮(DataGear)数据库管理系统 v1.1.1 发布
- 数据齿轮(DataGear)数据库管理系统 v1.3.0 发布
- 数据齿轮(DataGear)数据库管理系统 v1.4.0 发布
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
谷歌时代的柏拉图
[美] 丽贝卡·戈尔茨坦 / 李鹏程 / 中信出版集团·新思文化 / 2017-12-10 / 69.00元
我愿意用我所有的科技去换取和苏格拉底相处的一个下午。 ——史蒂夫•乔布斯 谷歌时代,科技昌明,众声喧哗,哲学提出的许多问题,科学似乎都已经给出了答案。若是如此,为什么我们今天还需要哲学?这个由古希腊城邦时代的哲人苏格拉底和柏拉图开创的学科,真的过时了吗? 已经2400岁 的柏拉图对此有话要说。哲学家兼小说家、美国国家人文奖章获得者戈尔茨坦史海钩沉,从经典著作中复活了柏拉图,让他来......一起来看看 《谷歌时代的柏拉图》 这本书的介绍吧!