手机网站建设开发案例 created by 6yang.net

手机应用中css3 loading 简单精典制作

发布日期: 2012-07-02 00:00:00
点击次数: 9296

大字小字

<!DOCTYPE HTML>
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>CSS3 Loading Animation Loop</title>
<style type="text/css">

.content {width:800px; margin:0 auto; padding-top:50px;}

/* STOP ANIMATION */

.stop {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
}

/* Loading Circle */

body{
    background:#ccc;
}
.loading{
    width:30px;
    border:5px solid #fd7300;
    opacity:.9;
    border-radius:25px;
    height:30px;
}
.ball1 {
    border:5px solid #fcd702;
    opacity:.9;
    border-top:5px solid rgba(0,0,0,0);
    border-left:5px solid rgba(0,0,0,0);
    border-bottom:5px solid rgba(0,0,0,0);
    border-radius:50px;
    width:30px;
    height:30px;
    margin:0 auto;
    position:relative;
    top:-5px;
    left:-5px;
    -moz-animation:spinoff .5s infinite linear;
    -webkit-animation:spinoff .5s infinite linear;
}

@-moz-keyframes spin {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(360deg); }
}
@-moz-keyframes spinoff {
    0% { -moz-transform:rotate(0deg); }
    100% { -moz-transform:rotate(-360deg); }
}
@-webkit-keyframes spin {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(360deg); }
}
@-webkit-keyframes spinoff {
    0% { -webkit-transform:rotate(0deg); }
    100% { -webkit-transform:rotate(-360deg); }
}

</style>

</head>
<body>

    <div class="content">
        <div class="loading">
               <div class="ball1"></div>
        </div>
    </div>


</body>
</html>