效果如下：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定时器的进度条</title> <style> .loading { width: 100%; height: 100%; position: fixed; top: 0; z-index: 100; background: #fff; } .loading .pic { width: 50px; height: 60px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .loading .pic i{ display: block; float:left; width:6px; height:50px; background:#399; margin:0 2px; transform:scaleY(0.4); animation:load 1.2s infinite; } .loading .pic i:nth-child(2){ animation-delay:0.1s; } .loading .pic i:nth-child(3){ animation-delay:0.2s; } .loading .pic i:nth-child(4){ animation-delay:0.3s; } .loading .pic i:nth-child(5){ animation-delay:0.4s; } @keyframes load{ 0%,40%,100%{ transform:scaleY(0.4) } 20%{ transform:scaleY(1) } } </style> </head> <body> <div class="loading"> <div class="pic"> <i></i><i></i><i></i><i></i><i></i> </div></div> </body> </html>
其他问题：
兼容性
通过网址 ：
http://autoprefixer.github.io
.loading { width: 100%; height: 100%; position: fixed; top: 0; z-index: 100; background: #fff; } .loading .pic { width: 50px; height: 60px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .loading .pic i{ display: block; float:left; width:6px; height:50px; background:#399; margin:0 2px; -webkit-transform:scaleY(0.4); -ms-transform:scaleY(0.4); transform:scaleY(0.4); -webkit-animation:load 1.2s infinite; animation:load 1.2s infinite; } .loading .pic i:nth-child(2){ -webkit-animation-delay:0.1s; animation-delay:0.1s; } .loading .pic i:nth-child(3){ -webkit-animation-delay:0.2s; animation-delay:0.2s; } .loading .pic i:nth-child(4){ -webkit-animation-delay:0.3s; animation-delay:0.3s; } .loading .pic i:nth-child(5){ -webkit-animation-delay:0.4s; animation-delay:0.4s; } @-webkit-keyframes load{ 0%,40%,100%{ -webkit-transform:scaleY(0.4); transform:scaleY(0.4) } 20%{ -webkit-transform:scaleY(1); transform:scaleY(1) } } @keyframes load{ 0%,40%,100%{ -webkit-transform:scaleY(0.4); transform:scaleY(0.4) } 20%{ -webkit-transform:scaleY(1); transform:scaleY(1) } }
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>定时器的进度条</title> <style> .loading { width: 100%; height: 100%; position: fixed; top: 0; z-index: 100; background: #fff; } .loading .pic { width: 50px; height: 60px; position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .loading .pic i{ display: block; float:left; width:6px; height:50px; background:#399; margin:0 2px; -webkit-transform:scaleY(0.4); -ms-transform:scaleY(0.4); transform:scaleY(0.4); -webkit-animation:load 1.2s infinite; animation:load 1.2s infinite; } .loading .pic i:nth-child(2){ -webkit-animation-delay:0.1s; animation-delay:0.1s; } .loading .pic i:nth-child(3){ -webkit-animation-delay:0.2s; animation-delay:0.2s; } .loading .pic i:nth-child(4){ -webkit-animation-delay:0.3s; animation-delay:0.3s; } .loading .pic i:nth-child(5){ -webkit-animation-delay:0.4s; animation-delay:0.4s; } @-webkit-keyframes load{ 0%,40%,100%{ opacity:0.7; -webkit-transform:scaleY(0.4); transform:scaleY(0.4) } 20%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1) } } @keyframes load{ 0%,40%,100%{ opacity:0.7; -webkit-transform:scaleY(0.4); transform:scaleY(0.4) } 20%{ opacity:1; -webkit-transform:scaleY(1); transform:scaleY(1) } } </style> </head> <body> <div class="loading"> <div class="pic"> <i></i><i></i><i></i><i></i><i></i> </div></div> <script> </script> </body> </html>
