Difference between revisions of "Team:GO Paris-Saclay"

Line 4: Line 4:
  
 
<style>
 
<style>
−
@keyframes spinner {
+
.spinner {
−
    0% {
+
  width: 40px;
−
        transform: translate3d(-50%, -50%, 0) rotate(0deg);
+
 
−
    }
+
  margin: 100px auto;
−
    100% {
+
  -webkit-animation: sk-rotateplane 1.2s infinite ease-in-out;
−
        transform: translate3d(-50%, -50%, 0) rotate(360deg);
+
  animation: sk-rotateplane 1.2s infinite ease-in-out;
−
    }
+
 
}
 
}
  
−
.spinner {
+
@-webkit-keyframes sk-rotateplane {
−
    // The height here is just for demo purposes
+
  0% { -webkit-transform: perspective(120px) }
−
    height: 100vh;
+
  50% { -webkit-transform: perspective(120px) rotateY(180deg) }
−
    opacity: 1;
+
  100% { -webkit-transform: perspective(120px) rotateY(180deg)  rotateX(180deg) }
−
    position: relative;
+
}
−
    transition: opacity linear 0.1s;   
+
  
−
    &::before {
+
@keyframes sk-rotateplane {
−
        animation: 2s linear infinite spinner;
+
  0% {
−
        border: solid 3px #eee;
+
    transform: perspective(120px) rotateX(0deg) rotateY(0deg);
−
        border-bottom-color: #EF6565;
+
    -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
−
        border-radius: 50%;
+
  } 50% {
−
        content: "";
+
    transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
−
        height: 40px;
+
    -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
−
        left: 50%;
+
  } 100% {
−
        opacity: inherit;
+
    transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
−
        position: absolute;
+
    -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
−
        top: 50%;
+
  }
−
        transform: translate3d(-50%, -50%, 0);
+
−
        transform-origin: center;
+
−
        width: 40px;
+
−
        will-change: transform;
+
−
    }
+
 
}
 
}
 
</style>
 
</style>
 +
 +
 
<img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png">
 
<img class="spinner" src="https://static.igem.org/mediawiki/2018/c/cc/T--GO_Paris-Saclay--mascotte_spinner.png">
 
</html>
 
</html>

Revision as of 09:27, 8 September 2018

Loading, please wait