版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/nice_xp/article/details/71244186
最新学习css，之前看过诺基亚手机的一个加载动画，所以想做一个类似的动画，动画效果如下：(csdn文章无法嵌入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>标签中就可以实现该效果。