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

 
(120 intermediate revisions by the same user not shown)
Line 44: Line 44:
 
             }  
 
             }  
 
        
 
        
 +
.fond_motor {
 +
              width: 100%;
 +
            }
 +
 
.stator_motor {
 
.stator_motor {
 
               width: 30%;
 
               width: 30%;
−
               text-align:center;
+
               padding:2% 35% 2% 35%;
 
               position: relative;
 
               position: relative;
−
               displat:inline;
+
               float:left;
 +
              display:inline;
 +
              z-index:2;
 
             }
 
             }
  
 
.rotor_motor {
 
.rotor_motor {
 
               position:absolute ;
 
               position:absolute ;
−
               width: 10%;
+
               width: 5%;
−
               left: 10%;
+
               left: 47.5%;
−
               top: 50%;
+
               top: 31.5%;
 +
              z-index:3;
 
             }
 
             }
 
              
 
              
 
.bobine_top {
 
.bobine_top {
 
               position:absolute ;
 
               position:absolute ;
−
               width: 10%;
+
               width: 4%;
−
               left: 50%;
+
               left: 48%;
−
               top: 25%;
+
               top: 15%;
−
              background-image: url("https://static.igem.org/mediawiki/2017/c/c7/Bobine_off.png");
+
 
               transform:rotate(90deg);
 
               transform:rotate(90deg);
 +
              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_right {
 
.bobine_right {
 
               position:absolute ;
 
               position:absolute ;
−
               width: 10%;
+
               width: 4%;
−
               left: 75%;
+
               left: 57.5%;
−
               top: 50%;
+
               top: 42%;
−
              background-image: url("https://static.igem.org/mediawiki/2017/c/c7/Bobine_off.png");
+
 
               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 {
 
               position:absolute ;
 
               position:absolute ;
−
               width: 10%;
+
               width: 4%;
−
               left: 50%;
+
               left: 48%;
−
               top: 75%;
+
               top: 71%;
−
              background-image: url("https://static.igem.org/mediawiki/2017/c/c7/Bobine_off.png");
+
 
               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);
 
             }
 
             }
  
 
.bobine_left {
 
.bobine_left {
 
               position:absolute ;
 
               position:absolute ;
−
               width: 10%;
+
               width: 4%;
−
               left: 25%;
+
               left: 38.5%;
−
               top: 50%;
+
               top: 42%;
−
               background-image: url("https://static.igem.org/mediawiki/2017/c/c7/Bobine_off.png");
+
               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>
 
      
 
      
Line 105: Line 508:
 
         </header>
 
         </header>
  
−
        <div class="statot_motor">
+
<p> Test </p>
  
−
         <img style="width:100% ; position:absolute ;" src="https://static.igem.org/mediawiki/2017/2/2e/Stator_motor.png">
+
         <div class="stator_motor">
  
−
            <div>
+
        <img class="fond_motor" src="https://static.igem.org/mediawiki/2017/2/2e/Stator_motor.png">
 +
 
 +
           
 
             <img class="rotor_motor" src="https://static.igem.org/mediawiki/2017/3/38/Aimant_motor.png">
 
             <img class="rotor_motor" src="https://static.igem.org/mediawiki/2017/3/38/Aimant_motor.png">
−
             </div>
+
             <img class="bobine_top" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_right" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_bot" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
 +
            <img class="bobine_left" src="https://static.igem.org/mediawiki/2017/e/e0/Bobine_on.png">
  
 
         </div>
 
         </div>
 
          
 
          
−
 
+
<p> Test </p>
  
  

Latest revision as of 08:21, 30 August 2017

Engineering

Microfluidics

Test

Test

Designed by iGEM Grenoble-Alpes 2017 team | Site Map