标签:linear key 需要 -name fixed har content nim nbsp
为了达到更好的用户体验,登陆界面需要设计多张背景图进行动态切换
<!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>
标签:linear key 需要 -name fixed har content nim nbsp
原文地址:http://www.cnblogs.com/pengfei25/p/7991872.html