|
|
| (30 intermediate revisions by 2 users not shown) |
| Line 100: |
Line 100: |
| | background-color: #555; /* Add a dark-grey background on hover */ | | background-color: #555; /* Add a dark-grey background on hover */ |
| | } | | } |
| − |
| |
| − | .slider_container {
| |
| − | margin: 30px auto;
| |
| − | width: 530px;
| |
| − | height: 400px;
| |
| − | position: relative;
| |
| − | border: 20px solid;
| |
| − | border-color: #fff;
| |
| − | border-bottom-width: 30px;
| |
| − | background-color: #f5f5f5;
| |
| − | box-shadow: #666 0 0 5px;
| |
| − | }
| |
| − |
| |
| − | .slider_container div {
| |
| − | position: absolute;
| |
| − | top: 0;
| |
| − | left: 0;
| |
| − | opacity: 0;
| |
| − | filter: alpha(opacity=0);
| |
| − | }
| |
| − |
| |
| − | .slider_container div {
| |
| − | -webkit-animation: round 55s linear infinite;
| |
| − | animation: round 55s linear infinite;
| |
| − | }
| |
| − |
| |
| − | @-webkit-keyframes round {
| |
| − | 4% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=100);
| |
| − | /* 0 - 1秒 淡入*/
| |
| − | }
| |
| − | 20% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=100);
| |
| − | /* 1- 5秒靜止*/
| |
| − | }
| |
| − | 24% {
| |
| − | opacity: 0;
| |
| − | filter: alpha(opacity=0);
| |
| − | /* 5-6秒淡出*/
| |
| − | }
| |
| − | }
| |
| − | @keyframes round {
| |
| − | 4% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=100);
| |
| − | /* 0 - 1秒 淡入*/
| |
| − | }
| |
| − | 20% {
| |
| − | opacity: 1;
| |
| − | filter: alpha(opacity=100);
| |
| − | /* 1- 5秒靜止*/
| |
| − | }
| |
| − | 24% {
| |
| − | opacity: 0;
| |
| − | filter: alpha(opacity=0);
| |
| − | /* 5-6秒淡出*/
| |
| − | }
| |
| − | }
| |
| − |
| |
| − |
| |
| − | .slider_container div:nth-child(1) {
| |
| − | -webkit-animation-delay: 0s;
| |
| − | animation-delay: 0s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(2) {
| |
| − | -webkit-animation-delay: 5s;
| |
| − | animation-delay: 5s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(3) {
| |
| − | -webkit-animation-delay: 10s;
| |
| − | animation-delay: 10s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(4) {
| |
| − | -webkit-animation-delay: 15s;
| |
| − | animation-delay: 15s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(5) {
| |
| − | -webkit-animation-delay: 20s;
| |
| − | animation-delay: 20s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(6) {
| |
| − | -webkit-animation-delay: 25s;
| |
| − | animation-delay: 25s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(7) {
| |
| − | -webkit-animation-delay: 30s;
| |
| − | animation-delay: 30s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(8) {
| |
| − | -webkit-animation-delay: 35s;
| |
| − | animation-delay: 35s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(10) {
| |
| − | -webkit-animation-delay: 40s;
| |
| − | animation-delay: 40s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(11) {
| |
| − | -webkit-animation-delay: 45s;
| |
| − | animation-delay: 45s;
| |
| − | }
| |
| − |
| |
| − | .slider_container div:nth-child(12) {
| |
| − | -webkit-animation-delay: 50s;
| |
| − | animation-delay: 50s;
| |
| − | }
| |
| − |
| |
| − | .slider_container span {
| |
| − | color: #000;
| |
| − | background: #fff;
| |
| − | position: absolute;
| |
| − | left: 0%;
| |
| − | top: 280px;
| |
| − | width: 400px;
| |
| − | height: 100px;
| |
| − | font-size: 30px;
| |
| − | text-align: center;
| |
| − | line-height: 100px;
| |
| − | -webkit-transform:scaleY(0);
| |
| − | -ms-transform:scaleY(0);
| |
| − | transform:scaleY(0);
| |
| − | -webkit-transition: all 0.5s ease-in-out;
| |
| − | transition: all 0.5s ease-in-out;
| |
| − | }
| |
| − |
| |
| − | .slider_container:hover span {
| |
| − | width: 100%;
| |
| − | -webkit-transform:scaleY(1);
| |
| − | -ms-transform:scaleY(1);
| |
| − | transform:scaleY(1);
| |
| − | }
| |
| − |
| |
| − | .slider_container:hover div {
| |
| − | -webkit-animation-play-state: paused;
| |
| − | animation-play-state: paused;
| |
| − | }
| |
| − |
| |
| − |
| |
| − | /*hp tab start*/
| |
| − | @import "compass/css3";
| |
| − |
| |
| − | @import url(https://fonts.googleapis.com/css?family=Rajdhani:300);
| |
| − |
| |
| − | $colorWhite: rgba(255,255,255,1);
| |
| − | $colorDamnLight: rgba(0,220,220,1);
| |
| − | $colorLight: rgba(0,190,190,1);
| |
| − | $colorDark: rgba(60,60,60,1);
| |
| − | $colorBlack: rgba(33,33,33,1);
| |
| − | $fontSize: 18px;
| |
| − |
| |
| − |
| |
| − |
| |
| − | .scifiUI {
| |
| − | list-style: none;
| |
| − | position: relative;
| |
| − | width: 600px;
| |
| − | margin: 50px auto;
| |
| − | padding: 0;
| |
| − | font-size: 1em;
| |
| − | color: $colorLight;
| |
| − | }
| |
| − |
| |
| − | li {
| |
| − | display: inline-block;
| |
| − |
| |
| − | input[type="radio"] {
| |
| − | @include opacity(0);
| |
| − | position: absolute;
| |
| − | outline: none;
| |
| − |
| |
| − | &:checked {
| |
| − |
| |
| − | ~ label {
| |
| − | background: $colorLight;
| |
| − | color: $colorBlack;
| |
| − | height: 50px;
| |
| − | font-size: 1.2em;
| |
| − | cursor: default;
| |
| − | @include box-shadow(0 0 10px $colorDamnLight);
| |
| − | }
| |
| − |
| |
| − | ~ .section {
| |
| − | @include opacity(1);
| |
| − | width: 500px;
| |
| − | padding: 50px;
| |
| − | border: 1px solid $colorLight;
| |
| − | color: $colorDamnLight;
| |
| − | letter-spacing: .1em;
| |
| − | text-indent: 1em;
| |
| − | z-index: 1;
| |
| − | }
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | label {
| |
| − | display: block;
| |
| − | width: 120px;
| |
| − | height: 40px;
| |
| − | border: 1px solid rgba($colorLight, .7);
| |
| − | border-bottom: 0;
| |
| − | @include border-radius(5px 5px 0 0);
| |
| − | color: rgba($colorLight, .7);
| |
| − | line-height: 50px;
| |
| − | text-align: center;
| |
| − | cursor: pointer;
| |
| − | @include transition(all 200ms ease-in-out);
| |
| − |
| |
| − | &:hover {
| |
| − | height: 50px;
| |
| − | border-color: $colorLight;
| |
| − | color: $colorLight;
| |
| − | }
| |
| − | }
| |
| − |
| |
| − | .section {
| |
| − | @include opacity(0);
| |
| − | position: absolute;
| |
| − | top: 51px;
| |
| − | left: 0;
| |
| − | width: 1000px;
| |
| − | padding: 50px;
| |
| − | border: 1px solid $colorLight;
| |
| − | background: rgba($colorLight, .1);
| |
| − | color: $colorWhite;
| |
| − | letter-spacing: -1em;
| |
| − | text-indent: 1em;
| |
| − |
| |
| − | @include transition(all 200ms ease-in-out);
| |
| − | }
| |
| − | }
| |
| − | /*hp tab end*/
| |
| − |
| |
| | | | |
| | </style> | | </style> |
| Line 369: |
Line 127: |
| | <a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br> | | <a href="https://2017.igem.org/Main_Page" target="_blank">IGEM 2017</a></br> |
| | <a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br> | | <a href="http://nymu-e.web.ym.edu.tw/bin/home.php" target="_blank">National Yang-Ming University</a></br> |
| | + | <a href="https://2017.igem.org/Team:NYMU-Taipei/Attributions" >Special Thanks</a> |
| | | | |
| | </p> | | </p> |
