为了达到更好的用户体验，登陆界面需要设计多张背景图进行动态切换
<!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{ ???width:100%; ???height:100%; ???position:fixed; ?}.login-section { ???width: 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>登陆界面背景动画的css样式
原文地址：http://www.cnblogs.com/pengfei25/p/7991872.html