Template:CSS/newpage

From 2014.igem.org

(Difference between revisions)
 
(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>

Latest revision as of 07:52, 9 June 2015