|
|
| (3 intermediate revisions not shown) |
| Line 26: |
Line 26: |
| | } | | } |
| | } | | } |
| - |
| |
| | | | |
| | body { | | body { |
| Line 381: |
Line 380: |
| | } | | } |
| | | | |
| - | * {
| |
| - | margin: 0;
| |
| - | padding: 0;
| |
| - | }
| |
| - |
| |
| - |
| |
| - | #robot {
| |
| - | position: absolute;
| |
| - | height: 78vh;
| |
| - | width: 20vh;
| |
| - | left: 0;
| |
| - | margin: 0 auto;
| |
| - | -webkit-animation: robot 1.8 infinite ease-in-out;
| |
| - | animation: robot 1.8 infinite ease-in-out;
| |
| - | z-index: 2;
| |
| - | }
| |
| - | #robot div {
| |
| - | position: absolute;
| |
| - | -webkit-transform-origin: 50% 0;
| |
| - | -ms-transform-origin: 50% 0;
| |
| - | transform-origin: 50% 0;
| |
| - | }
| |
| - | #robot .r div {
| |
| - | background: #29516D;
| |
| - | }
| |
| - | #robot .l div {
| |
| - | background: #326384;
| |
| - | }
| |
| - | #robot .leg.r, #robot .arm.l {
| |
| - | -webkit-animation: trans 1.8s 0.9s infinite ease-in-out;
| |
| - | animation: trans 1.8s 0.9s infinite ease-in-out;
| |
| - | }
| |
| - | #robot .leg.l, #robot .arm.r {
| |
| - | -webkit-animation: trans 1.8s infinite ease-in-out;
| |
| - | animation: trans 1.8s infinite ease-in-out;
| |
| - | }
| |
| - | #robot .head {
| |
| - | top: 10vh;
| |
| - | left: 5vh;
| |
| - | width: 9vh;
| |
| - | height: 10vh;
| |
| - | margin: 0 auto;
| |
| - | -webkit-transform-origin: 20% 150%;
| |
| - | -ms-transform-origin: 20% 150%;
| |
| - | transform-origin: 20% 150%;
| |
| - | -webkit-animation: head 1.8s infinite ease-in-out;
| |
| - | animation: head 1.8s infinite ease-in-out;
| |
| - | background: #326384;
| |
| - | }
| |
| - | #robot .arm {
| |
| - | left: 5vh;
| |
| - | top: 20.5vh;
| |
| - | width: 8vh;
| |
| - | height: 5.5vh;
| |
| - | }
| |
| - | #robot .arm div {
| |
| - | top: 100%;
| |
| - | left: 0;
| |
| - | width: 100%;
| |
| - | height: 10vh;
| |
| - | box-sizing: border-box;
| |
| - | -webkit-transform: rotate(5deg);
| |
| - | -ms-transform: rotate(5deg);
| |
| - | transform: rotate(5deg);
| |
| - | -webkit-animation: arms 1.8s infinite ease-in-out;
| |
| - | animation: arms 1.8s infinite ease-in-out;
| |
| - | }
| |
| - | #robot .arm.l div {
| |
| - | -webkit-animation-delay: -0.9s;
| |
| - | animation-delay: -0.9s;
| |
| - | }
| |
| - | #robot .leg {
| |
| - | top: 45vh;
| |
| - | left: 5vh;
| |
| - | width: 8vh;
| |
| - | height: 4vh;
| |
| - | }
| |
| - | #robot .leg div {
| |
| - | width: 100%;
| |
| - | height: 15vh;
| |
| - | top: 100%;
| |
| - | -webkit-animation: legs1 1.8s infinite ease-in-out;
| |
| - | animation: legs1 1.8s infinite ease-in-out;
| |
| - | }
| |
| - | #robot .leg div div {
| |
| - | -webkit-animation: legs2 1.8s infinite ease-in-out;
| |
| - | animation: legs2 1.8s infinite ease-in-out;
| |
| - | }
| |
| - | #robot .leg.r div {
| |
| - | -webkit-animation-delay: -0.9s;
| |
| - | animation-delay: -0.9s;
| |
| - | }
| |
| - |
| |
| - | .shadow {
| |
| - | position: absolute;
| |
| - | width: 22vh;
| |
| - | height: 3vh;
| |
| - | margin: 0 auto;
| |
| - | bottom: 27px;
| |
| - | border-radius: 50%;
| |
| - | background: #05314f;
| |
| - | -webkit-animation: shadow 1.8s infinite ease-in-out;
| |
| - | animation: shadow 1.8s infinite ease-in-out;
| |
| - | z-index: 1;
| |
| - | }
| |
| - |
| |
| - | /**************************************************************************************/
| |
| - | @-webkit-keyframes robot {
| |
| - | 0%, 50%, 100% {
| |
| - | -webkit-transform: translateY(0vh) rotate(0.5deg);
| |
| - | transform: translateY(0vh) rotate(0.5deg);
| |
| - | }
| |
| - | 15%, 65% {
| |
| - | -webkit-transform: translateY(-1vh) rotate(-0.2deg);
| |
| - | transform: translateY(-1vh) rotate(-0.2deg);
| |
| - | }
| |
| - | }
| |
| - | @keyframes robot {
| |
| - | 0%, 50%, 100% {
| |
| - | -webkit-transform: translateY(0vh) rotate(0.5deg);
| |
| - | transform: translateY(0vh) rotate(0.5deg);
| |
| - | }
| |
| - | 15%, 65% {
| |
| - | -webkit-transform: translateY(-1vh) rotate(-0.2deg);
| |
| - | transform: translateY(-1vh) rotate(-0.2deg);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes trans {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: translateX(0vh);
| |
| - | transform: translateX(0vh);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: translateX(1.2vh);
| |
| - | transform: translateX(1.2vh);
| |
| - | }
| |
| - | }
| |
| - | @keyframes trans {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: translateX(0vh);
| |
| - | transform: translateX(0vh);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: translateX(1.2vh);
| |
| - | transform: translateX(1.2vh);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes head {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(-1deg);
| |
| - | transform: rotate(-1deg);
| |
| - | }
| |
| - | 25%, 75% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(0deg);
| |
| - | transform: rotate(0deg);
| |
| - | }
| |
| - | }
| |
| - | @keyframes head {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(-1deg);
| |
| - | transform: rotate(-1deg);
| |
| - | }
| |
| - | 25%, 75% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(0deg);
| |
| - | transform: rotate(0deg);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes arms {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(-10deg);
| |
| - | transform: rotate(-10deg);
| |
| - | }
| |
| - | }
| |
| - | @keyframes arms {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(-10deg);
| |
| - | transform: rotate(-10deg);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes legs1 {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(10deg);
| |
| - | transform: rotate(10deg);
| |
| - | }
| |
| - | 45% {
| |
| - | -webkit-transform: rotate(-15deg);
| |
| - | transform: rotate(-15deg);
| |
| - | }
| |
| - | }
| |
| - | @keyframes legs1 {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(10deg);
| |
| - | transform: rotate(10deg);
| |
| - | }
| |
| - | 45% {
| |
| - | -webkit-transform: rotate(-15deg);
| |
| - | transform: rotate(-15deg);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes legs2 {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 33% {
| |
| - | -webkit-transform: rotate(20deg);
| |
| - | transform: rotate(20deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(0deg);
| |
| - | transform: rotate(0deg);
| |
| - | }
| |
| - | }
| |
| - | @keyframes legs2 {
| |
| - | 0%, 100% {
| |
| - | -webkit-transform: rotate(2deg);
| |
| - | transform: rotate(2deg);
| |
| - | }
| |
| - | 33% {
| |
| - | -webkit-transform: rotate(20deg);
| |
| - | transform: rotate(20deg);
| |
| - | }
| |
| - | 50% {
| |
| - | -webkit-transform: rotate(0deg);
| |
| - | transform: rotate(0deg);
| |
| - | }
| |
| - | }
| |
| - | @-webkit-keyframes shadow {
| |
| - | 0%, 50%, 100% {
| |
| - | -webkit-transform: scale(1.02);
| |
| - | transform: scale(1.02);
| |
| - | }
| |
| - | 25%, 75% {
| |
| - | -webkit-transform: scale(0.98);
| |
| - | transform: scale(0.98);
| |
| - | }
| |
| - | }
| |
| - | @keyframes shadow {
| |
| - | 0%, 50%, 100% {
| |
| - | -webkit-transform: scale(1.02);
| |
| - | transform: scale(1.02);
| |
| - | }
| |
| - | 25%, 75% {
| |
| - | -webkit-transform: scale(0.98);
| |
| - | transform: scale(0.98);
| |
| - | }
| |
| - | }
| |
| | | | |
| | </style> | | </style> |
| | </html> | | </html> |
"
