登陸界面背景動畫的css樣式
阿新 • • 發佈：2017-12-06
wid ext gen linear ont init scrip gin generator
為了達到更好的用戶體驗，登陸界面需要設計多張背景圖進行動態切換
<!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樣式