Difference between revisions of "Team:CPU CHINA"

Line 40: Line 40:
  
 
}
 
}
−
  @keyframes mymove {
+
  @keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 47: Line 47:
 
     }
 
     }
  
−
     @-moz-keyframes mymove {
+
     @-moz-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 54: Line 54:
 
     }
 
     }
  
−
     @-webkit-keyframes mymove {
+
     @-webkit-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 61: Line 61:
 
     }
 
     }
  
−
     @-o-keyframes mymove {
+
     @-o-keyframes mymovewheel {
 
       from {}
 
       from {}
 
       to {
 
       to {
Line 71: Line 71:
 
{
 
{
 
       position: absolute;
 
       position: absolute;
−
       top: 100%;
+
       top: 1150px;
 
       width: 10%;
 
       width: 10%;
−
       height: 10%;
+
       height: 1000px;
−
       left:32%;
+
       left:21%;
−
      animation: rotate 10s infinite;
+
−
      -webkit-animation: mymove 10s infinite;
+
−
      animation-timing-function: linear;
+
 
       background: url(https://static.igem.org/mediawiki/2018/0/0a/T--CPU_CHINA--background-wheel.png);
 
       background: url(https://static.igem.org/mediawiki/2018/0/0a/T--CPU_CHINA--background-wheel.png);
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
Line 86: Line 83:
 
       position: absolute;
 
       position: absolute;
 
       top: 145px;
 
       top: 145px;
−
       width:20%;
+
       width:60%;
 +
  height:1000px;
 
       margin-left:10%;
 
       margin-left:10%;
 
       background: url(https://static.igem.org/mediawiki/2018/4/41/T--CPU_CHINA--background-carriage.png);
 
       background: url(https://static.igem.org/mediawiki/2018/4/41/T--CPU_CHINA--background-carriage.png);
 
       background-repeat: no-repeat;
 
       background-repeat: no-repeat;
 
       background-size: 100%;  
 
       background-size: 100%;  
 +
}
 +
.whole-carriage{
 +
position:relative;
 +
animation:mymove 5s;
 +
-webkit-animation:mymove 5s; /*Safari and Chrome*/
 +
}
 +
 +
@keyframes mymove
 +
{
 +
from {left:0px;}
 +
to {left:100%;}
 +
}
 +
 +
@-webkit-keyframes mymove /*Safari and Chrome*/
 +
{
 +
from {left:0px;}
 +
to {left:100%;}
 
}
 
}
 
</style>
 
</style>
Line 110: Line 125:
 
     Your browser does not support the video tag.
 
     Your browser does not support the video tag.
 
</video>
 
</video>
 +
<div id="whole-carriage" class="whole-carriage">
 +
<div class="carriage" id="carriage">
 +
</div>
  
−
<div class="carriage" id="carriage">
+
<div class="wheel" id="wheel1">
−
</div>
+
</div>
  
−
<div class="wheel" id="wheel1">
+
<div class="wheel" id="wheel2" style="margin-left:26%">
 +
</div>
 
</div>
 
</div>
−
 
−
<div class="wheel" id="wheel2" style="margin-left:26%">
 
−
</div>
 
−
 
  
 
</body>
 
</body>
Line 139: Line 154:
 
}
 
}
  
 +
$(document).ready(function(){
 +
$(".whole-carriage").css("animation","mymove 5s");
 +
$(".whole-carriage").css("-webkit-animation","mymove 5s");
 +
 +
var e = document.getElementById("whole-carriage");
 +
e.addEventListener("animationend", function() {
 +
alert('css3运动结束！');
 +
});
 +
})
 +
 +
 +
 +
var e = document.getElementById("whole-carriage");
 +
e.addEventListener("animationend", function() {
 +
alert('css3运动结束！');
 +
});
 
</script>
 
</script>
 
</html>
 
</html>

Revision as of 09:13, 17 October 2018