css3旋转加载动画

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 css3旋转加载动画的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" >
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <meta name="author" content="Script Tutorials" />
        <title>css3旋转加载动画</title>
        <link href="css/main.css" rel="stylesheet" type="text/css" />
        <link href="css/loading1.css" rel="stylesheet" type="text/css" />
        <link href="css/loading2.css" rel="stylesheet" type="text/css" />
        <link href="css/loading3.css" rel="stylesheet" type="text/css" />
        <link href="css/loading4.css" rel="stylesheet" type="text/css" />
    </head>
    <body>
        <div class="main_body">
            <div class="element">
                <div class="loading1">
                </div>
            </div>
            <div class="element">
                <div class="loading2">
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading3">
                    <div>loading..</div>
                    <div></div>
                    <div></div>
                </div>
            </div>
            <div class="element">
                <div class="loading4">
                </div>
            </div>
        </div>
    </body>
</html>

CSS代码(main.css):

*{margin:0;padding:0;}
header{background-color:rgba(33,33,33,0.9);color:#fff;display:block;font:14px/1.3 Arial,sans-serif;height:50px;position:relative;}
header h2{font-size:22px;margin:0px auto;padding:10px 0;width:80%;text-align:center;}
header a,a:visited{text-decoration:none;color:#fcfcfc;}
body{background:url("../images/bg.jpg") no-repeat scroll top center transparent;}
.main_body{margin:175px auto 0;position:relative;width:460px;}
.element{float:left;height:230px;width:230px;}

附件:下载该文件资源,减少时间成本(增值服务)