最新学习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>标签中就可以实现该效果。
