最近学习css，之前看过诺基亚手机的一个加载动画，所以想做一个类似的动画，动画效果如下(个别浏览器无法看到效果)：
源码：
html:
- <!DOCTYPE html>
- <html>
- <head>
- <title>animate</title>
- </head>
- <body>
- <div class="animate-continer back">
- <div class="animate">
- <div></div>
- <div></div>
- <div></div>
- <div></div>
- </div>
- </div>
- <style type="text/css">
- </style>
- </body>
- </html>
CSS:
-
.animate-continer {
background: rgb(50, 50, 50);
opacity: 0.4;
overflow: hidden;
}.animate {
position: relative;
}.animate>div:first-of-type,
.animate>div:nth-child(2),
.animate>div:nth-child(3),
.animate>div:last-of-type {
position: absolute;
width: 5px;
height: 5px;
border-radius: 100%;
top:100px;
margin: 2px;
}.animate>div:first-of-type {
left:-15px;
background: rgb(255, 255, 255);
animation: loader 3s 200ms infinite;
-webkit-animation: loader 3s 200ms infinite; /* Safari 与 Chrome */
}.animate>div:nth-child(2) {
left:-30px;
background: rgb(255, 255, 255);
animation: loader 3s 400ms infinite;
-webkit-animation: loader 3s 400ms infinite; /* Safari 与 Chrome */
}.animate>div:nth-child(3) {
left:-45px;
background: rgb(255, 255, 255);
animation: loader 3s 600ms infinite;
-webkit-animation: loader 3s 600ms infinite; /* Safari 与 Chrome */
}.animate>div:last-of-type {
left:-60px;
background: rgb(255, 255, 255);
animation: loader 3s 800ms infinite;
-webkit-animation: loader 3s 800ms infinite; /* Safari 与 Chrome */
}.back {
margin:auto;
width: 300px;
height: 200px;
border-radius: 10px;
}@keyframes loader {
0% { width:5px; height:5px; transform: translate(0, 0);}
45% { width:10px; height:10px; transform: translate(187px, 0); }
55% { width:10px; height:10px; transform: translate(187px, 0); }
100% { width:5px; height:5px; transform: translate(375px, 0); }
}@-webkit-keyframes loader
{
0% { width:5px; height:5px; transform: translate(0, 0);}
45% { width:10px; height:10px; transform: translate(187px, 0); }
55% { width:10px; height:10px; transform: translate(187px, 0); }
100% { width:5px; height:5px; transform: translate(375px, 0); }
}
将css部分的代码放入到html中的<style>标签中就可以实现该效果。
