/* AB模版网 做最好的织梦整站模板下载网站 */ /* 网址:Www.AdminBuy.Cn */ /* 图标大全:Sc.AdminBuy.Cn 专业建站素材网站 */ /* QQ:9490489 */ @-webkit-keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @keyframes piston { 0% { margin-top: 0; } 50% { margin-top: 80px; } 100% { margin-top: 0; } } @-webkit-keyframes arm { 0% { -webkit-transform: rotate(0); } 25% { -webkit-transform: rotate(-18deg); } 50% { -webkit-transform: rotate(0); } 75% { -webkit-transform: rotate(18deg); } 100% { -webkit-transform: rotate(0); } } @keyframes arm { 0% { transform: rotate(0); } 25% { transform: rotate(-18deg); } 50% { transform: rotate(0); } 75% { transform: rotate(18deg); } 100% { transform: rotate(0); } } .loadingEffect { text-align: center; position: fixed; left: 0; top: 0; z-index: 99999; width: 100%; height: 100%; background: linear-gradient(to bottom, coral, tomato); -webkit-transition: all 1s linear 0s; -moz-transition: all 1s linear 0s; -ms-transition: all 1s linear 0s; transition: all 1s linear 0s; opacity: 1; filter: Alpha(opacity=100); } .loadingEffect.hideCss { opacity: 0; filter: Alpha(opacity=0); } #robot { position: absolute; top: 50%; left: 50%; width: 540px; height: 250px; margin-top: -125px; margin-left: -270px; font-family: 'Oswald', sans-serif; font-size: 30px; font-weight: 700; color: #444; text-shadow: 0px -1px 1px rgba(0,0,0,.7), 0px 1px 1px rgba(255,255,255,.4); } @media screen and (max-width: 700px) { #robot { -webkit-transform: scale(0.7); -moz-transform: scale(0.7); -ms-transform: scale(0.7); transform: scale(0.7); } } @media screen and (max-width: 480px) { #robot { -webkit-transform: scale(0.6); -moz-transform: scale(0.6); -ms-transform: scale(0.6); transform: scale(0.6); } } @media screen and (max-width: 360px) { #robot { -webkit-transform: scale(0.5); -moz-transform: scale(0.5); -ms-transform: scale(0.5); transform: scale(0.5); } } .piston { float: left; margin-right: 10px; position: relative; width: 100px; height: 250px; background: rgba(0,0,0,.1); border-radius: 10px 10px 50px 50px; box-shadow: 0 -4px 0 rgba(0,0,0,.2), 0 4px 0 rgba(255,255,255,.2); } .piston:last-child { margin: 0; } .piston .block { position: relative; width: 100px; height: 60px; line-height: 60px; background: #555; border-radius: 10px; -webkit-animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite; animation: piston 1.2s cubic-bezier(.5, 0, .5, 1) infinite; box-shadow: inset 0 -4px 0 rgba(0,0,0,.2), inset 0 4px 0 rgba(255,255,255,.2); } .piston:nth-child(1) .block { -webkit-animation-delay: 0s; animation-delay: 0s; } .piston:nth-child(2) .block { -webkit-animation-delay: .1s; animation-delay: .1s; } .piston:nth-child(3) .block { -webkit-animation-delay: .2s; animation-delay: .2s; } .piston:nth-child(4) .block { -webkit-animation-delay: .3s; animation-delay: .3s; } .piston:nth-child(5) .block { -webkit-animation-delay: .4s; animation-delay: .4s; } .piston .arm { position: absolute; top: 50%; left: 50%; margin: -10px 0 0 -10px; width: 20px; height: 150px; background: #555; border-radius: 10px; box-shadow: inset 0 -22px 0 rgba(0,0,0,.2); z-index: -1; -webkit-transform-origin: center 10px; -webkit-animation: arm 1.2s linear infinite; -webkit-animation-delay: inherit; transform-origin: center 10px; animation: arm 1.2s linear infinite; animation-delay: inherit; } .piston .arm:before, .piston .arm:after { content: ''; position: absolute; right: 0; left: 0; height: 16px; background: #eee; border-radius: 50%; margin: 2px; } .piston .arm:before { top: 0; } .piston .arm:after { bottom: 0; } .piston .rotator { position: absolute; bottom: 0; width: 100px; height: 100px; border-radius: 10px; border-radius: 50%; border: 20px solid rgba(0,0,0,.1); box-sizing: border-box; z-index: -1; }