您的位置：首页 > Web前端 > CSS

css3实现loading动画

2017-10-19 17:12 281 查看
<!DOCTYPE html>

<html lang="en">

<head>
<meta charset="UTF-8">
<title>Document</title>

</head>

<style type="text/css">

.box{width:100%;padding:3%;box-sizing:border-box;overflow:hidden}

.box .loader{width:30%;float:left;height:200px;margin-right:3%;border:1px #ccc solid;box-sizing:border-box;display:flex;align-items:center;justify-content:center}

@-webkit-keyframes loading-1{0%{transform:rotate(0)}

50%{transform:rotate(180deg)}

100%{transform:rotate(360deg)}

}

.loading-1{width:35px;height:35px;position:relative}

.loading-1 i{display:block;width:100%;height:100%;border-radius:50%;background:linear-gradient(transparent 0,transparent 70%,#333 30%,#333 100%);-webkit-animation:loading-1 .6s linear 0s infinite}

@-webkit-keyframes loading-2{0%{transform:scaleY(1)}

50%{transform:scaleY(.4)}

100%{transform:scaleY(1)}

}

.loading-2 i{display:inline-block;width:4px;height:35px;border-radius:2px;margin:0 2px;background-color:#333}

.loading-2 i:nth-child(1){-webkit-animation:loading-2 1s ease-in .1s infinite}

.loading-2 i:nth-child(2){-webkit-animation:loading-2 1s ease-in .2s infinite}

.loading-2 i:nth-child(3){-webkit-animation:loading-2 1s ease-in .3s infinite}

.loading-2 i:nth-child(4){-webkit-animation:loading-2 1s ease-in .4s infinite}

.loading-2 i:nth-child(5){-webkit-animation:loading-2 1s ease-in .5s infinite}

@-webkit-keyframes loading-3{50%{transform:scale(.4);opacity:.3}

100%{transform:scale(1);opacity:1}

}

.loading-3{position:relative}

.loading-3 i{display:block;width:15px;height:15px;border-radius:50%;background-color:#333;position:absolute}

.loading-3 i:nth-child(1){top:25px;left:0;-webkit-animation:loading-3 1s ease 0s infinite}

.loading-3 i:nth-child(2){top:17px;left:17px;-webkit-animation:loading-3 1s ease -.12s infinite}

.loading-3 i:nth-child(3){top:0;left:25px;-webkit-animation:loading-3 1s ease -.24s infinite}

.loading-3 i:nth-child(4){top:-17px;left:17px;-webkit-animation:loading-3 1s ease -.36s infinite}

.loading-3 i:nth-child(5){top:-25px;left:0;-webkit-animation:loading-3 1s ease -.48s infinite}

.loading-3 i:nth-child(6){top:-17px;left:-17px;-webkit-animation:loading-3 1s ease -.6s infinite}

.loading-3 i:nth-child(7){top:0;left:-25px;-webkit-animation:loading-3 1s ease -.72s infinite}

.loading-3 i:nth-child(8){top:17px;left:-17px;-webkit-animation:loading-3 1s ease -.84s infinite}

</style>

<body>
<div class="box">
<div class="loader">
<div class="loading-1">
<i></i>
</div>
</div>

<div class="loader">
<div class="loading-2">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>

<div class="loader">
<div class="loading-3">
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
<i></i>
</div>
</div>
</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航