Template:CSS/newpage

From 2014.igem.org

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

Revision as of 06:03, 9 June 2015

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