Difference between revisions of "Template:NYMU-Taipei-css"

Line 101: Line 101:
 
}
 
}
  
 +
.slider_container {
 +
    margin: 30px auto;
 +
    width: 600px;
 +
    height: 300px;
 +
    position: relative;
 +
    border: 20px solid;   
 +
    border-color: #fff;
 +
    border-bottom-width: 100px;
 +
    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;
 +
}
 +
 
 
</style>
 
</style>
 
 

Revision as of 13:03, 5 September 2017

CONTACT US

Email us: 2017igem.nymutaipei@gmail.com
Call us: 886-2-28267316
Facebook: NYMU iGEM Team

AFFILIATIONS & ACKNOWLEDGMENT

IGEM 2017
National Yang-Ming University