为了达到更好的用户体验，登陆界面需要设计多张背景图进行动态切换
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <title>Document</title> <style type="text/css"> body{ 100%; height:100%; position:fixed; } .login-section { 100%; height: 100%; background: url(map/img/1.png) 0% 0%; background-size: 100% 100%; animation-name: bg-test1; animation-duration: 10000ms; animation-iteration-count: infinite; animation-timing-function: linear; } @-webkit-keyframes bg-test1{ 0%{background:url(map/img/1.png) 0% 0%;background-size:100% 100%;} 28%{background:url(map/img/1.png) 0% 0%;background-size:100% 100%;} 33%{background:url(map/img/2.png) 0% 0%;background-size:100% 100%;} 61%{background:url(map/img/2.png) 0% 0%;background-size:100% 100%;} 66%{background:url(map/img/3.png) 0% 0%;background-size:100% 100%;} 94%{background:url(map/img/3.png 0% 0%;background-size:100% 100%;} 100%{background:url(map/img/1.png) 0% 0%;background-size:100% 100%;} } </style> </head> <body> <div class="login-section"> </div> </body> </html>