用css3仿loading图效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="author" content="" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />
<title> loading </title>
<style>
.loading{position:relative;width:10em;height:10em;margin:1em auto;background-color:#fff;filter:blur(.3em) contrast(50);}
.cir{position:absolute;left:50%;top:1em;width:3em;height:3em;margin-left:-1.5em;border-radius:50%;transform-origin:50% 4em;}
.cir-1{background-color:#7CFEF2;-webkit-animation:rotation 2.2s infinite ;
animation:rotation 2.2s infinite;}
.cir-2{background-color:#7CFEF2;-webkit-animation:rotation 1.8s -1s infinite;animation:rotation 1.8s -1s infinite;}
.cir-3{background-color:#7CFEF2;-webkit-animation:rotation 1s infinite;animation:rotation 1s infinite;}
@-webkit-keyframes rotation{
100%{-webkit-transform:rotate(360deg);}
}
@keyframes rotation{
100%{transform:rotate(360deg);}
}
</style>
</head>
<body>
<div class="loading">
<i class="cir cir-1"></i>
<i class="cir cir-2"></i>
<i class="cir cir-3"></i>
</div>
</body>
</html>
