@-webkit-keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } @keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } g#head { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation: head 1s 1s ease infinite; animation: head 1s 1s ease infinite; } g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse { -webkit-animation: color 350ms linear infinite; animation: color 350ms linear infinite; } @-webkit-keyframes head { 0%, 46%, 50%, 55%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 49% { -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px); transform: rotate(20deg) translate3d(0px, 0px, 0px); } 51% { -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px); transform: rotate(-10deg) translate3d(0px, 0px, 0px); } } @keyframes head { 0%, 46%, 50%, 55%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 49% { -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px); transform: rotate(20deg) translate3d(0px, 0px, 0px); } 51% { -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px); transform: rotate(-10deg) translate3d(0px, 0px, 0px); } } @-webkit-keyframes color { 0%, 100% { fill: #ccc; } 50% { fill: red; } } @keyframes color { 0%, 100% { fill: #ccc; } 50% { fill: #fff; } } #upperTorso { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: torso 600ms 1s ease infinite; animation: torso 600ms 1s ease infinite; } #upperTorso #leftArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 80% 5%; -ms-transform-origin: 80% 5%; transform-origin: 80% 5%; -webkit-animation: left 1s ease infinite; animation: left 1s ease infinite; } #upperTorso #leftArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 800ms 1s ease infinite; animation: forearm 800ms 1s ease infinite; } #upperTorso #rightArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 18% 0%; -ms-transform-origin: 18% 0%; transform-origin: 18% 0%; -webkit-animation: right 1s ease infinite; animation: right 1s ease infinite; } #upperTorso #rightArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 700ms 1s ease infinite; animation: forearm 700ms 1s ease infinite; } @-webkit-keyframes torso { 40%, 50%, 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 55% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes torso { 40%, 50%, 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 55% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes left { 60% { -webkit-transform: rotate(100deg); transform: rotate(100deg); } } @keyframes left { 60% { -webkit-transform: rotate(100deg); transform: rotate(100deg); } } @-webkit-keyframes right { 50% { -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } } @keyframes right { 50% { -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } } @-webkit-keyframes forearm { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } } @keyframes forearm { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } } #lowerTrunk { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: lowerTrunk 1s ease infinite; animation: lowerTrunk 1s ease infinite; } @-webkit-keyframes lowerTrunk { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px); transform: rotate(2deg) translate3d(2px, 0px, 0px); } 75% { -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px); transform: rotate(-2deg) translate3d(-2px, 0px, 0px); } } @keyframes lowerTrunk { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px); transform: rotate(2deg) translate3d(2px, 0px, 0px); } 75% { -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px); transform: rotate(-2deg) translate3d(-2px, 0px, 0px); } } #leftFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: leftFoot 2s ease infinite; animation: leftFoot 2s ease infinite; } #leftFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLeg 2s ease infinite; animation: lowerLeg 2s ease infinite; } @-webkit-keyframes leftFoot { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(70deg); transform: rotate(70deg); } } @keyframes leftFoot { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(70deg); transform: rotate(70deg); } } @-webkit-keyframes lowerLeg { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 8%, 14% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 11%, 18% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @keyframes lowerLeg { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 8%, 14% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 11%, 18% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } #rightFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 5%; -ms-transform-origin: 50% 5%; transform-origin: 50% 5%; -webkit-animation: rightFoot 2s ease infinite; animation: rightFoot 2s ease infinite; } #rightFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLegIz 2s ease infinite; animation: lowerLegIz 2s ease infinite; } @-webkit-keyframes rightFoot { 75% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rightFoot { 75% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes lowerLegIz { 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60%, 70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 65%, 85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } @keyframes lowerLegIz { 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60%, 70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 65%, 85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizelegibility; } html, body { width: 100%; height: 100%; overflow: hidden; } body { background: #404853; } .col { text-align: center; } .col h1 { text-shadow: 0 3px 0px #404853, 0 6px 0px #333333; color: #acacac; font-size: 6em; font-weight: 700; line-height: 0.6em; } .col p { color: #ccc; font-size: 0.95em; font-weight: 300; line-height: 7em; }

404

返回首页