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

css3-loading效果

2016-07-09 15:10 525 查看

5个圆圈loading图

1.父容器container

绝对定位父元素在屏幕中间

2.子元素div

画出五个div,设置border-radius，然后内联变成一行

3.子元素div动画

每个子元素放大缩小，但是依次给个动画延迟，则是很好的loading效果

https://github.com/wanghuanweb/wanghuan.github.io/tree/master/css/css3%E5%8A%A8%E7%94%BB%E8%AE%BE%E8%AE%A1/css3%20loading%E5%9B%BE

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8">
<link href="index.css" rel="stylesheet">
</head>

<body>
<div class="container">
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
<div class="dot"></div>
</div>
</body>
</html>

*{
margin: 0px;
padding: 0px;
}

html,body{
height: 100%;
}

.container{
position: absolute;
top: 50%;
left: 50%;
}

.dot{
width: 24px;
height: 24px;
border-radius: 12px;
display: inline-block;

-webkit-animation: move 1s infinite;
-moz-animation: move 1s infinite;
-o-animation: move 1s infinite;
animation: move 1s infinite;
}

.dot:nth-child(1){
animation-delay: 0.1s;
background: #32aacc;
}

.dot:nth-child(2){
animation-delay: 0.2s;
background: #64aacc;
}

.dot:nth-child(3){
animation-delay: 0.3s;
background: #96aacc;
}

.dot:nth-child(4){
animation-delay: 0.4s;
background: #c8aacc;
}

.dot:nth-child(5){
animation-delay: 0.5s;
background: #faaacc;
}

@-webkit-keyframes move {
0%{
-webkit-transform: scale(1);
-webkit-opacity: 1;
}
50%{
-webkit-transform: scale(2);
-webkit-opacity: 0.5;
}
100%{
-webkit-transform: scale(1);
-webkit-opacity: 1;
}
}

@-moz-keyframes move {
0%{
-moz-transform: scale(1);
-moz-opacity: 1;
}
50%{
-moz-transform: scale(2);
-moz-opacity: 0.5;
}
100%{
-moz-transform: scale(1);
-moz-opacity: 1;
}
}

@-o-keyframes move {
0%{
-o-transform: scale(1);
-o-opacity: 1;
}
50%{
-o-transform: scale(2);
-o-opacity: 0.5;
}
100%{
-o-transform: scale(1);
-o-opacity: 1;
}
}

@keyframes move {
0%{
transform: scale(1);
opacity: 1;
}
50%{
transform: scale(2);
opacity: 0.5;
}
100%{
transform: scale(1);
opacity: 1;
}
}

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

标签：

相关文章推荐

新的分享

章节导航