[纯css]win8环形等待动画

来源：互联网发布：小刀娱乐网源码php 编辑：程序博客网时间：2024/06/06 19:47

兼容性：IE10+/Chrome/Firefox/Safari/Opera

<!DOCTYPE html>
<html>
<head></head>
<body>
<style type="text/css">
body {background-color: #999;}
.waitting-circle {position: relative;margin-left: 45%;margin-top:10%}
.waitting-circle>div {
position: absolute;
float: left;
font-size: 60px;
overflow: hidden;
width: 1em;
height: 1em;
border-radius: 50%;
margin: 33% auto;
}
.circle1
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) .3s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) .3s;
}
.circle2
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) .6s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) .6s;
}
.circle3
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) .9s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) .9s;
}
.circle4
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.2s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.2s;
}
.circle5
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.5s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.5s;
}
.circle6
{
-webkit-animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.8s;
animation: load 6s infinite cubic-bezier(0,.6,1,.4) 1.8s;
}
@-webkit-keyframes load {
0%,29.9% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0em 1.2em 0 -0.5em #fff;
}
30% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
box-shadow: 0em 1.2em 0 -0.4em #fff;
}
65% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
box-shadow: 0em 1.2em 0 -0.4em #fff;
}
100% {
-webkit-transform: rotate(720deg);
transform: rotate(720deg);
box-shadow: 0em 1.2em 0 -0.4em #fff;
}
}
</style>
<div class="waitting-circle">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
<div class="circle6"></div>
</div>
</body>
</html>

0 0