• HTML/CSS

    css3实现loading加载动画

    by on 2011年06月21日

<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>css3实现loading加载动画</title>
<style>

div { background:#5A8AD8; width:80px; height:30px;-webkit-border-radius:5px; text-align:center; font-size:0;}
div b {display:inline-block; width:5px; height:15px; border:1px #39f solid; margin:6px 2px; background:#fff;opacity:0.2;-webkit-animation-delay: 0.3s;-webkit-animation:loading 1.8s infinite linear;/*动画名称loading,一次动画的总时间,动画循环次数无限,动画类型线性*/}
div b:first-child {-webkit-animation-delay:0; -webkit-transform:scale(0.8);/*缩放初始大小*/}
div b:last-child {-webkit-animation-delay:0.6s;}
@-webkit-keyframes loading{
0%,100%{
opacity:0.2;/*动画开始和结束时都设置透明度为0.2*/
}
50%{
opacity:1;/*动画中间时设置透明度为1*/
}
}
</style>
</head>
<body>
<div>
<b></b>
<b></b>
<b></b>
</div>
</body>
</html>

基本原理是利用css3  的 animation

查看demo