|
|
| 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 233: |
Line 104: |
| | <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> |
