您的位置：首页 > 其它

loading效果

2016-03-29 14:41 197 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box{
width: 20px;
height: 20px;
position: absolute;
top: 100px;
left: 100px;
}
.box span{
position: absolute;
width: 6px;
height:10px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));
animation: move 0.8s infinite linear;
}
.box span:nth-of-type(1){
left:0%;
top: 0;
margin-left: -3px;
margin-top: -5px;
transform: rotate(-45deg);
animation-delay:-0.7s ;
}
.box span:nth-of-type(2){
left:50%;
top: 0px;
margin-left: -3px;
margin-top: -10px;
animation-delay:-0.6s ;
}
.box span:nth-of-type(3){
left:100%;
top: 0px;
margin-left: -3px;
margin-top: -5px;
transform: rotate(45deg);
animation-delay:-0.5s ;
}
.box span:nth-of-type(4){
left:0%;
top: 50%;
margin-left: -9px;
margin-top: -5px;
transform: rotate(-90deg);
animation-delay:-0.0s ;
}
.box span:nth-of-type(5){
left:100%;
top: 50%;
margin-left: 3px;
margin-top: -5px;
transform: rotate(90deg);
animation-delay:-0.4s ;
}
.box span:nth-of-type(6){
left:0%;
top: 100%;
margin-left: -3px;
margin-top: -5px;
transform: rotate(-135deg);
animation-delay:-0.1s ;

}
.box span:nth-of-type(7){
left:50%;
top: 100%;
margin-left: -5px;
margin-top: 0px;
transform: rotate(180deg);
animation-delay:-0.2s ;
}
.box span:nth-of-type(8){
left:100%;
top: 100%;
margin-left: -3px;
margin-top: -5px;
transform: rotate(135deg);
animation-delay:-0.3s ;
}
@-webkit-keyframes move{
0%{
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));

}
87.5%{

background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.6)), color-stop(60%,rgba(0,0,0,0.1)),color-stop(100%,rgba(0,0,0,0.01)));
}
100%{
background: #fff;
}
}
</style>
</head>
<body>
<div class="box">
<span class="left-top"></span>
<span class="middle-top"></span>
<span class="right-top"></span>
<span class="left-middle"></span>
<span class="right-middle"></span>
<span class="left-bottom"></span>
<span class="middle-bottom"></span>
<span class="right-bottom"></span>
</div>
<script>

</script>
</body>
</html>

配色略丑

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航