应用css3制做齿轮loading动漫实际效果

日期:2020-12-13 类型:科技新闻 

关键词:秀米制作h5,h5如何制作,h5小游戏制作,h5游戏开发,免费的h5制作网站

这是1款根据css3齿轮loading动漫殊效。该殊效应用font-awesome字体样式标志的齿轮标志做为图案设计,根据CSS3 animation来制做3个齿轮的健身运动实际效果。

查询演试     免费下载源代码

HTML

最先在网页页面中引进font-awesome文档。

<link href="

随后在置放动漫的部位再加HTML构造:

<div class="container">
    <div class="row">
        <div class="col-md⑴2">
            <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: ⑵0px;
    left: 3px;
    animation: animate⑴ 1s infinite linear;
}
#loader2{
    color: #d72f2b;
    font-size: 50px;
    text-align: center;
    height: 50px;
    width: 50px;
    right: ⑴2px;
    animation: animate⑵ 1s infinite linear;
}
#loader3{
    color: #3A4652;
    font-size: 35px;
    text-align: center;
    width: 35px;
    height: 35px;
    bottom: ⑴0px;
    left: 3px;
    animation: animate⑶ 1s infinite linear;
}
@keyframes animate⑴{
    100% { transform: rotate(⑴80deg); }
}
@keyframes animate⑵{
    100% { transform: rotate(180deg); }
}
@keyframes animate⑶{
    100% { transform: rotate(⑴80deg); }
}

总结

以上所述是网编给大伙儿详细介绍的应用css3制做齿轮loading动漫实际效果,期待对大伙儿有一定的协助,假如大伙儿有任何疑惑请给我留言,网编会立即回应大伙儿的。在此也十分谢谢大伙儿对脚本制作之家网站的适用!

更多殊效源代码能够关心网编的群众号哦!