/*person*/
.container { height: 300px; width: 100%;} .person { position: absolute; height: 75px; width: 0; color: #fff; left: 150px; top: 159px; transform-origin: 50% 50% 0px; -webkit-animation: sprint 2s infinite ease-in; } .person .head:before { content: ""; position: absolute; top: 0px; left: -6px; height: 2.7px; width: 42px; border-radius: 20%; border: 4px solid white; background-color: #fff; transform-origin: 50% 100% 0px; z-index: 90; } .person .head { position: absolute; top: -30px; left: -6px; height: 30px; width: 30px; border-radius: 50%; border: 4px solid white; transform-origin: 50% 100% 0px; z-index: 90; -webkit-animation: bob 2s infinite alternate; } .person .head:after { content: ""; position: absolute; top: -12px; left: 9px; height: 12px; width: 15px; border-radius: 30%; border: 4px solid white; background-color: #fff; z-index: 90; } .person .torso { position: absolute; height: 60px; width: 0; border-left: 2px solid white; left: 0px; top: 15px; z-index: 90; } .person .part { position: absolute; left: 0; top: 75px; z-index: 90; } .person .part.arm { position: absolute; border-left: 3px solid white; border-bottom: 3px solid white; height: 45px; width: 39px; top: 15px; right: 300px; transform-origin: 0% 0% 0px; -webkit-animation: pump 1s infinite ease-in-out; } .person .part.arm.one { transform: rotate3d(0, 0, 1, -90deg); } .person .part.arm.two { transform: rotate3d(0, 0, 1, -90deg); animation-delay: .5s; } .person .part.leg { height: 57px; width: 60px; border-right: 3px solid white; border-top: 3px solid white; -webkit-animation: run 1s infinite ease-in; transform-origin: 0% 0% 0px; } .person .part.leg.one { transform: rotate3d(0, 0, 1, 90deg); } .person .part.leg.two { transform: rotate3d(0, 0, 1, 80deg); animation-delay: .5s; } .person .part .foot { position: absolute; top: 90px; left: 0; width: 3px; height: 3px; background-color: #ffffff; z-index: 900; border: 3px solid red; } @keyframes run { 0% { transform: rotate3d(0, 0, 1, -5deg); } 50% { transform: rotate3d(0, 0, 1, 150deg); } 100% { transform: rotate3d(0, 0, 1, -5deg); } } @keyframes bob { 0% { transform: rotate3d(0, 0, 1, 5deg); } 25% { transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg); } 50% { transform: rotate3d(0, 0, 1, 5deg); } 75% { transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg); } 100% { transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg); } } @keyframes pump { 0% { transform: rotate3d(0, 0, 1, 80deg); } 50% { transform: rotate3d(0, 0, 1, -70deg); } 100% { transform: rotate3d(0, 0, 1, 80deg); } } @keyframes spin { 0% { transform: rotate3d(0, 0, 1, -180deg); } 25% { transform: rotate3d(0, 0, 1, -100deg); } 75% { transform: rotate3d(0, 0, 1, 100deg); } 100% { transform: rotate3d(0, 0, 1, 180deg); } } @keyframes sprint { 0% { transform-origin: 50% 50% 0px; transform: translate(-200px, 0px); } 100% { transform: translate(0px, 0px); transform-origin: 50% 50% 0px; transform: translate(1300px, 0px); } }
/*其他*/
body{
background-color:#fff;
}