*{ margin: 0px; padding: 0px; } .BG_img{ width: 100%; height: 100%; position: fixed; top: 0px; left: 0px; } .people1{ position: fixed; bottom: 320px; right: 450px; z-index: 3; } .right1{ position: fixed; top: 160px; right: 505px; z-index: 2; } .right2{ position: fixed; top: 320px; right: 224px; z-index: 2; } .bottom1{ position: fixed; bottom: 420px; right: 215px; z-index: 2; } .bottom2{ position: fixed; bottom: 130px; right: 730px; z-index: 2; } .car1{ position: fixed; top: 130px; right: 420px; z-index: 1; animation: myfirst 5s; animation-fill-mode:forwards; } @keyframes myfirst{ 0% {top: 130px;right: 420px;background-image: url(../image/矢量智能对象%20拷贝%2016.png);} 70% {top: 370px; right: 40px;background-image: url(../image/矢量智能对象%20拷贝%2016.png);} 70.2% {top: 370px;right: 40px;background-image: url(../image/矢量智能对象%20拷贝%20116.png);} 100% {top: 570px;right: 400px;background-image: url(../image/矢量智能对象%20拷贝%20116.png);} } #card{ position: fixed; top: 400px; right: 600px; z-index: 1; display: none; } #BG_index{ width: 100%; height: 100%; background: rgba(0,0,0,.4); position: fixed; top: 0px; left: 0px; z-index: 9; display: none; } #BG_index img{ width: 1146px; height: 553px; position: relative; top:50%; left: 50%; animation: myfirst1 1s; animation-fill-mode:forwards; } @keyframes myfirst1{ 0% {width: 0px;height: 0px;top: 50%;right: 50%;} 100% {width: 1146px;height: 553px;top:50%;left: 50%;margin: -276px 0px 0px -573px;} }