多背景幕布形式拉开和关闭效果：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>多背景</title> <style> @-webkit-keyframes move { 0% { -webkit-animation-timing-function:ease; background-position:0 0,0 298px,center,0 0, 0 0; background-size:auto,auto,0 0,auto,auto; } 40% { background-position:0 -292px,0 610px,center,0 0,0 0; background-size:auto,auto,0 0,auto,auto; } 85% { background-position:0 -292px,0 610px,center,0 0,0 0; background-size:auto,auto,344px 432px,auto,auto; } 100% { background-position:0 -292px,0 610px,center,0 0,0 0; background-size:auto,auto,344px 432px,auto,auto; } } #box { width:1024px; height:615px; margin:0 auto; background:url(Images/new-top.png) no-repeat,url(Images/new-bottom.png) no-repeat 0 298px,url(Images/html5_logo.png) no-repeat center,url(Images/new_star.png) no-repeat,url(Images/new_bg.png) no-repeat; /*第一处背景图在最上面*/ background-size:auto,auto,0 0,auto,auto; -webkit-animation-name:move; -webkit-animation-duration:3s; -webkit-animation-direction:alternate; /*规定动画是否在下一周期逆向地播放。默认是 "normal"。*/ -webkit-animation-iteration-count:2; /*规定动画被播放的次数。默认是 1。*/ -webkit-animation-delay:1s; } </style> </head> <body> <div id="box"> </div> </body> </html>