Difference between revisions of "Team:TP-CC San Diego"

Line 94: Line 94:
 
}
 
}
  
 +
.animation {
 +
  position: fixed;
 +
  cursor: pointer;
 +
  top: 50vh;
 +
  left: 50%;
 +
  color: white;
 +
  transform: translate3d(-50%,-50%,0);
 +
  padding: $pad $extra;
 +
  display: inline-block;
 +
  border: $thick solid transparent;
 +
  position: relative;
 +
  font-size: 1.5em;
 +
  letter-spacing: 0.07em;
 +
 
 +
  .text {
 +
    // padding: 0 0.3em;
 +
    font-family: proxima-nova;
 +
    transform: translate3d(0,$pad,0);
 +
    display: block;
 +
    transition: transform 0.4s cubic-bezier(.2,0,0,1) 0.4s;
 +
  }
 +
 
 +
  &:after {
 +
    position: absolute;
 +
    content: '';
 +
    bottom: -$thick;
 +
    left: $extra;
 +
    right: $extra;
 +
    height: $thick;
 +
    background: $color;
 +
    z-index: -1;
 +
    transition:
 +
      transform 0.8s cubic-bezier(1,0,.37,1) 0.2s,
 +
      right 0.2s cubic-bezier(.04,.48,0,1) 0.6s,
 +
      left 0.4s cubic-bezier(.04,.48,0,1) 0.6s;
 +
    transform-origin: left;
 +
  }
 +
 +
}
 +
 +
.line {
 +
  position: absolute;
 +
  background: $color;
 +
 
 +
  &.-right,
 +
  &.-left {
 +
    width: $thick;
 +
    bottom: -$thick;
 +
    top: -$thick;
 +
    transform: scale3d(1,0,1);
 +
  } 
 +
 
 +
  &.-top,
 +
  &.-bottom {
 +
    height: $thick;
 +
    left: -$thick;
 +
    right: -$thick;
 +
    transform: scale3d(0,1,1);
 +
  }
 +
 
 +
  &.-right {
 +
    right: -$thick;
 +
    transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.23s;
 +
    transform-origin: top;
 +
  }
 +
 
 +
  &.-top {
 +
    top: -$thick;
 +
    transition: transform 0.08s linear 0.43s;
 +
    transform-origin: left;
 +
  }
 +
 
 +
  &.-left {
 +
    left: -$thick;
 +
    transition: transform 0.08s linear 0.51s;
 +
    transform-origin: bottom;
 +
  }
 +
 
 +
  &.-bottom {
 +
    bottom: -$thick;
 +
    transition: transform 0.3s cubic-bezier(1,0,.65,1.01);
 +
    transform-origin: right;
 +
  } 
 +
}
 +
 +
a:hover,
 +
a:active {
 +
 
 +
  .text {
 +
    transform: translate3d(0,0,0);
 +
    transition: transform 0.6s cubic-bezier(.2,0,0,1) 0.4s;
 +
  }
 +
 
 +
  &:after {
 +
    transform: scale3d(0,1,1);
 +
    right: -$thick;
 +
    left: -$thick;
 +
    transform-origin: right;
 +
    transition:
 +
      transform 0.2s cubic-bezier(1,0,.65,1.01) 0.17s,
 +
      right 0.2s cubic-bezier(1,0,.65,1.01),
 +
      left 0s 0.3s;
 +
  }
 +
 
 +
  .line {
 +
    transform: scale3d(1,1,1);
 +
   
 +
    &.-right {
 +
      transition: transform 0.1s cubic-bezier(1,0,.65,1.01) 0.2s;
 +
      transform-origin: bottom;
 +
    }
 +
 +
    &.-top {
 +
      transition: transform 0.08s linear 0.4s;
 +
      transform-origin: right;
 +
    }
 +
 +
    &.-left {
 +
      transition: transform 0.08s linear 0.48s;
 +
      transform-origin: top;
 +
    }
 +
 +
    &.-bottom {
 +
      transition: transform 0.5s cubic-bezier(0,.53,.29,1) 0.56s;
 +
      transform-origin: left;
 +
    }
 +
  }
 +
 
 +
}
  
 
</style>
 
</style>
Line 104: Line 233:
 
         <img src="https://static.igem.org/mediawiki/2017/archive/e/e4/20171023064510%21T--TP-CC_San_Diego--brain.png" width = "400">
 
         <img src="https://static.igem.org/mediawiki/2017/archive/e/e4/20171023064510%21T--TP-CC_San_Diego--brain.png" width = "400">
 
         <div class="textDiv">
 
         <div class="textDiv">
 +
          <a class = "animation>
 +
        <span class="text">Project Description</span>
 +
        <span class="line -right"></span>
 +
        <span class="line -top"></span>
 +
        <span class="line -left"></span>
 +
        <span class="line -bottom"></span>
 +
        </a>
 
         <h3 class = "page-title">Project Description</h3>
 
         <h3 class = "page-title">Project Description</h3>
 
         </div>
 
         </div>

Revision as of 08:16, 23 October 2017

Home

ecDNA

Project Description

Project Description

Results

Proof

Modeling

Lab Notebook

Protocols

Medal Criteria

Human Practices

Team