Template:CSS/newpage

From 2014.igem.org

(Difference between revisions)
 
(33 intermediate revisions not shown)
Line 1: Line 1:
<html>
<html>
<style rel='stylesheet' type='text/css'>
<style rel='stylesheet' type='text/css'>
 +
@import url(http://fonts.googleapis.com/css?family=Raleway:100,900);
 +
@-webkit-keyframes flip-top {
 +
  from {
 +
    -webkit-transform: rotate(50deg) translateY(120vh);
 +
            transform: rotate(50deg) translateY(120vh);
 +
  }
 +
}
 +
@keyframes flip-top {
 +
  from {
 +
    -webkit-transform: rotate(50deg) translateY(120vh);
 +
            transform: rotate(50deg) translateY(120vh);
 +
  }
 +
}
 +
@-webkit-keyframes flip-bottom {
 +
  from {
 +
    -webkit-transform: rotate(-50deg) translateY(120vh);
 +
            transform: rotate(-50deg) translateY(120vh);
 +
  }
 +
}
 +
@keyframes flip-bottom {
 +
  from {
 +
    -webkit-transform: rotate(-50deg) translateY(120vh);
 +
            transform: rotate(-50deg) translateY(120vh);
 +
  }
 +
}
body {
body {
-
   background: #fff;
+
  display: -webkit-box;
 +
  display: -webkit-flex;
 +
  display: -ms-flexbox;
 +
  display: flex;
 +
  -webkit-box-pack: center;
 +
  -webkit-justify-content: center;
 +
      -ms-flex-pack: center;
 +
          justify-content: center;
 +
  -webkit-box-align: center;
 +
  -webkit-align-items: center;
 +
      -ms-flex-align: center;
 +
          align-items: center;
 +
  height: 100vh;
 +
  overflow: hidden;
 +
   background: #111;
 +
  -webkit-animation: glow 8s both;
 +
          animation: glow 8s both;
 +
 
 +
 +
 
 +
 
}
}
 +
 +
 +
 +
span {
 +
  font: 900 15vw Raleway;
 +
  position: relative;
 +
  display: inline-block;
 +
  -webkit-perspective: 500px;
 +
          perspective: 500px;
 +
}
 +
span:nth-child(odd):before {
 +
  -webkit-animation-name: flip-top;
 +
          animation-name: flip-top;
 +
}
 +
span:nth-child(odd):after {
 +
  -webkit-animation-name: flip-bottom;
 +
          animation-name: flip-bottom;
 +
}
 +
span:nth-child(even):before {
 +
  -webkit-animation-name: flip-bottom;
 +
          animation-name: flip-bottom;
 +
}
 +
span:nth-child(even):after {
 +
  -webkit-animation-name: flip-top;
 +
          animation-name: flip-top;
 +
}
 +
span:nth-child(1n + 0):before {
 +
  color: #4EC0B6;
 +
}
 +
span:nth-child(1n + 0):after {
 +
  color: #4ea4c0;
 +
}
 +
span:nth-child(2n + 1):before {
 +
  color: #3967CB;
 +
}
 +
span:nth-child(2n + 1):after {
 +
  color: #3c39cb;
 +
}
 +
span:nth-child(3n + 2):before {
 +
  color: #FDCD2F;
 +
}
 +
span:nth-child(3n + 2):after {
 +
  color: #e8fd2f;
 +
}
 +
span:nth-child(4n + 3):before {
 +
  color: #E23942;
 +
}
 +
span:nth-child(4n + 3):after {
 +
  color: #e26839;
 +
}
 +
span:nth-child(1):before {
 +
  -webkit-animation-delay: 0.88706s;
 +
          animation-delay: 0.88706s;
 +
}
 +
span:nth-child(1):after {
 +
  -webkit-animation-delay: 1.32717s;
 +
          animation-delay: 1.32717s;
 +
}
 +
span:nth-child(2):before {
 +
  -webkit-animation-delay: 1.76318s;
 +
          animation-delay: 1.76318s;
 +
}
 +
span:nth-child(2):after {
 +
  -webkit-animation-delay: 2.19375s;
 +
          animation-delay: 2.19375s;
 +
}
 +
span:nth-child(3):before {
 +
  -webkit-animation-delay: 2.61756s;
 +
          animation-delay: 2.61756s;
 +
}
 +
span:nth-child(3):after {
 +
  -webkit-animation-delay: 3.03328s;
 +
          animation-delay: 3.03328s;
 +
}
 +
span:nth-child(4):before {
 +
  -webkit-animation-delay: 3.43965s;
 +
          animation-delay: 3.43965s;
 +
}
 +
span:nth-child(4):after {
 +
  -webkit-animation-delay: 3.8354s;
 +
          animation-delay: 3.8354s;
 +
}
 +
span:nth-child(5):before {
 +
  -webkit-animation-delay: 4.21932s;
 +
          animation-delay: 4.21932s;
 +
}
 +
span:nth-child(5):after {
 +
  -webkit-animation-delay: 4.59022s;
 +
          animation-delay: 4.59022s;
 +
}
 +
span:nth-child(6):before {
 +
  -webkit-animation-delay: 4.94696s;
 +
          animation-delay: 4.94696s;
 +
}
 +
span:nth-child(6):after {
 +
  -webkit-animation-delay: 5.28843s;
 +
          animation-delay: 5.28843s;
 +
}
 +
span:nth-child(7):before {
 +
  -webkit-animation-delay: 5.61358s;
 +
          animation-delay: 5.61358s;
 +
}
 +
span:nth-child(7):after {
 +
  -webkit-animation-delay: 5.92141s;
 +
          animation-delay: 5.92141s;
 +
}
 +
span:nth-child(8):before {
 +
  -webkit-animation-delay: 6.21098s;
 +
          animation-delay: 6.21098s;
 +
}
 +
span:nth-child(8):after {
 +
  -webkit-animation-delay: 6.48137s;
 +
          animation-delay: 6.48137s;
 +
}
 +
span:nth-child(9):before {
 +
  -webkit-animation-delay: 6.73177s;
 +
          animation-delay: 6.73177s;
 +
}
 +
span:nth-child(9):after {
 +
  -webkit-animation-delay: 6.96139s;
 +
          animation-delay: 6.96139s;
 +
}
 +
span:before, span:after {
 +
  display: block;
 +
  content: attr(data-text);
 +
  -webkit-animation: 0.88889s ease-out both;
 +
          animation: 0.88889s ease-out both;
 +
  -webkit-animation-name: inherit;
 +
          animation-name: inherit;
 +
  text-shadow: 0 0 1em;
 +
}
 +
span:before {
 +
  -webkit-clip-path: polygon(0 0 100% 0, 100% 100%);
 +
  clip-path: polygon(0 0 100% 0, 100% 100%);
 +
  position: absolute;
 +
  -webkit-transform-origin: left center;
 +
      -ms-transform-origin: left center;
 +
          transform-origin: left center;
 +
  color: #4EC0B6;
 +
}
 +
span:after {
 +
  -webkit-clip-path: polygon(0 0, 100% 100%, 0 100%);
 +
  clip-path: polygon(0 0, 100% 100%, 0 100%);
 +
  color: #3967CB;
 +
}
 +
 +
#Body path {
#Body path {
   stroke: #00ff30;
   stroke: #00ff30;
Line 50: Line 242:
   position: absolute;
   position: absolute;
   top: 50%;
   top: 50%;
-
   left: 50%;
+
   left: 82%;
   margin-top: -250px;
   margin-top: -250px;
   margin-left: -250px;
   margin-left: -250px;
Line 136: Line 328:
   }
   }
}
}
 +
 +
.below{
 +
-webkit-filter: url("#goo");
 +
          filter: url("#goo");
 +
}
 +
 +
footer {
 +
  position: absolute;
 +
  bottom: 0;
 +
  width: 100%;
 +
  height: 7vh;
 +
  background:red;
 +
}
 +
 +
 +
.bubble {
 +
  position: absolute;
 +
  top: 90vh;
 +
  left: 45%;
 +
  width: 50px;
 +
  height: 20px;
 +
  background: red;
 +
  border-radius: 50%;
 +
  -webkit-animation: loader 1.3s ease-in-out infinite;
 +
  animation: loader 1.3s ease-in-out infinite;
 +
}
 +
.bubble:nth-child(2) {
 +
  left: 50%;
 +
  width: 40px;
 +
  height: 20px;
 +
  -webkit-animation: loader 2.6s ease-in-out infinite;
 +
  animation: loader 2.6s ease-in-out infinite;
 +
}
 +
 +
.bubble:nth-child(3) {
 +
  left: 55%;
 +
  -webkit-animation: loader 1.3s ease-in-out infinite;
 +
  animation: loader 1.3s ease-in-out infinite;
 +
}
 +
 +
@keyframes loader {
 +
  0% {
 +
    -webkit-transform: translate(0, 0);
 +
            transform: translate(0, 0);
 +
  }
 +
  50% {
 +
    -webkit-transform: translate(0, -70px);
 +
            transform: translate(0, -70px);
 +
  }
 +
 +
}
 +
 +
</style>
</style>
</html>
</html>

Latest revision as of 07:52, 9 June 2015

Retrieved from "http://2014.igem.org/Template:CSS/newpage"