Difference between revisions of "Team:Grenoble-Alpes/Microfluidics"

 
(45 intermediate revisions by the same user not shown)
Line 50: Line 50:
 
.stator_motor {
 
.stator_motor {
 
               width: 30%;
 
               width: 30%;
−
               padding:2% 2% 2% 2%;
+
               padding:2% 35% 2% 35%;
 
               position: relative;
 
               position: relative;
 
               float:left;
 
               float:left;
 
               display:inline;
 
               display:inline;
 +
              z-index:2;
 
             }
 
             }
  
Line 61: Line 62:
 
               left: 47.5%;
 
               left: 47.5%;
 
               top: 31.5%;
 
               top: 31.5%;
 +
              z-index:3;
 
             }
 
             }
 
              
 
              
Line 69: Line 71:
 
               top: 15%;
 
               top: 15%;
 
               transform:rotate(90deg);
 
               transform:rotate(90deg);
−
 
+
              z-index:3;
−
            }
+
−
 
+
−
.bobine_top:hover {
+
 
               -webkit-filter: brightness(0.5);
 
               -webkit-filter: brightness(0.5);
 
               -moz-filter: brightness(0.5);
 
               -moz-filter: brightness(0.5);
Line 79: Line 78:
  
 
               filter: brightness(0.5);
 
               filter: brightness(0.5);
−
              }
+
            }
 +
 
  
 
.bobine_right {
 
.bobine_right {
Line 87: Line 87:
 
               top: 42%;
 
               top: 42%;
 
               transform:rotate(180deg);
 
               transform:rotate(180deg);
−
            }
+
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 
 +
              filter: brightness(0.5);
 +
                }
  
 
.bobine_bot {
 
.bobine_bot {
Line 95: Line 102:
 
               top: 71%;
 
               top: 71%;
 
               transform:rotate(270deg);
 
               transform:rotate(270deg);
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 
             }
 
             }
  
Line 102: Line 116:
 
               left: 38.5%;
 
               left: 38.5%;
 
               top: 42%;
 
               top: 42%;
 +
              z-index:3;
 +
              -webkit-filter: brightness(0.5);
 +
              -moz-filter: brightness(0.5);
 +
              -o-filter: brightness(0.5);
 +
              -ms-filter: brightness(0.5);
 +
 +
              filter: brightness(0.5);
 
             }           
 
             }           
 
        
 
        
 +
 +
 +
.stator_motor:hover .bobine_top {
 +
              -webkit-filter: brightness(1);
 +
              -moz-filter: brightness(1);
 +
              -o-filter: brightness(1);
 +
              -ms-filter: brightness(1);
 +
 +
              filter: brightness(1);
 +
              }
 +
 +
.stator_motor:hover .bobine_right {
 +
    -webkit-animation: illuminate_right 4s linear infinite;
 +
    -moz-animation: illuminate_right 4s linear infinite;
 +
    animation: illuminate_right 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .bobine_bot {
 +
    -webkit-animation: illuminate_bot 4s linear infinite;
 +
    -moz-animation: illuminate_bot 4s linear infinite;
 +
    animation: illuminate_bot 4s linear infinite;
 +
                }
 +
 +
.stator_motor:hover .bobine_left {
 +
    -webkit-animation: illuminate_left 4s linear infinite;
 +
    -moz-animation: illuminate_left 4s linear infinite;
 +
    animation: illuminate_left 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .bobine_top {
 +
    -webkit-animation: illuminate_top 4s linear infinite;
 +
    -moz-animation: illuminate_top 4s linear infinite;
 +
    animation: illuminate_top 4s linear infinite;
 +
              }
 +
 +
 +
.stator_motor:hover .rotor_motor {
 +
    -webkit-animation: turn 4s linear infinite;
 +
    -moz-animation: turn 4s linear infinite;
 +
    animation: turn 4s linear infinite;
 +
}
 +
 +
 +
 +
 +
@-moz-keyframes turn {
 +
    0% {transform: rotate(0deg)}
 +
    100% {transform: rotate(360deg)}
 +
}
 +
 +
@keyframes turn {
 +
    0% {transform: rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
 +
 +
@-webkit-keyframes turn {
 +
    0% {transform:rotate(0deg)}
 +
    100% {transform:rotate(360deg)}
 +
}
 +
 +
/************ Anim stepper right coal **********/
 +
 +
@-moz-keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_right {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    13%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    37%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    50% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
/************ Anim stepper bot coal **********/
 +
 +
@-moz-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_bot {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    38% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    62% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
/************ Anim stepper left coal **********/
 +
 +
@-moz-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_left {
 +
    0%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    50%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    63% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    87% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
}
 +
 +
 +
/************ Anim stepper top coal **********/
 +
 +
@-moz-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
@-webkit-keyframes illuminate_top {
 +
    0%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    12%  {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    25%  {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    75% {
 +
        filter: brightness(0.5);
 +
        -webkit-filter: brightness(0.5);
 +
    }
 +
    88% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
    100% {
 +
        filter: brightness(1);
 +
        -webkit-filter: brightness(1);
 +
    }
 +
}
 +
 +
 
       </style>
 
       </style>
 
      
 
      

Latest revision as of 08:21, 30 August 2017

Engineering

Microfluidics

Test

Test

Designed by iGEM Grenoble-Alpes 2017 team | Site Map