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

CSS3实现加载中效果

2016-09-29 14:40 393 查看

代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>loading</title>
<style>
body { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; height: 100vh; }
.Loader { height: 30px; width: 90px; position: relative; }
.Loader .Bar { background: #04C096; height: 0; position: absolute; bottom: 0; width: 10px; border-radius: 2px; }
.Loader .Bar:nth-child(0) { left: -15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0s; animation: bottom-top 2s infinite ease-in-out 0s; }
.Loader .Bar:nth-child(1) { left: 0px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.2s; animation: bottom-top 2s infinite ease-in-out 0.2s; }
.Loader .Bar:nth-child(2) { left: 15px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.4s; animation: bottom-top 2s infinite ease-in-out 0.4s; }
.Loader .Bar:nth-child(3) { left: 30px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.6s; animation: bottom-top 2s infinite ease-in-out 0.6s; }
.Loader .Bar:nth-child(4) { left: 45px; -webkit-animation: bottom-top 2s infinite ease-in-out 0.8s; animation: bottom-top 2s infinite ease-in-out 0.8s; }
.Loader .Bar:nth-child(5) { left: 60px; -webkit-animation: bottom-top 2s infinite ease-in-out 1s; animation: bottom-top 2s infinite ease-in-out 1s; }
.Loader .Bar:nth-child(6) { left: 75px; -webkit-animation: bottom-top 2s infinite ease-in-out 1.2s; animation: bottom-top 2s infinite ease-in-out 1.2s; }

@-webkit-keyframes bottom-top {
0% { height: 0; opacity: 0; }
50% { height: 30px; opacity: 1; }
100% { height: 0; opacity: 0; }
}

@keyframes bottom-top {
0% { height: 0; opacity: 0; }
50% { height: 30px; opacity: 1; }
100% { height: 0; opacity: 0; }
}
</style>
</head>
<body>
<div class="Loader">
<div class="Bar"></div>
<div class="Bar"></div>
<div class="Bar"></div>
<div class="Bar"></div>
<div class="Bar"></div>
<div class="Bar"></div>
</div>
</body>
</html>

来源：http://codepen.io/jackoliver/pen/ORpQBv

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

标签：

相关文章推荐

新的分享

章节导航