纯CSS的loading加载动画

来源:https://www.sucaihuo.com/js/2986.html 2017-09-12 21:43浏览(705) 收藏

一款纯CSS的loading加载动画,有10种加载效果可供选择,每种效果的样式都可以自由调整。
纯CSS的loading加载动画
分类:css3 > transform 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css"/>

页面的body部分,需设置好10种加载效果的div容器,代码如下:

<div class="main-site">
    <div class="main-header pad-top wrapper" id="mainHeader">
        <h1 class="text-giga">纯CSS的loading加载动画</h1>
    </div>
    <div class="main-content space-top wrapper" role="main" id="mainContent">
        <div class="loader loader-black loader-1"></div>
        <div class="loader loader-2"></div>
        <div class="loader loader-black loader-3"></div>
        <div class="loader loader-black loader-4"></div>
        <div class="loader loader-black loader-5"></div>
        <div class="loader loader-6"></div>
        <div class="loader loader-7"></div>
        <div class="loader loader-8"></div>
        <div class="loader loader-9"></div>
        <div class="loader loader-10"></div>
    </div>
</div>
标签: 加载loading
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2