Difference between revisions of "Team:CIEI-BJ/Interactive"

Line 1: Line 1:
−
{{CIEI-BJ}}
+
<!DOCTYPE html>
 
<html lang="en">
 
<html lang="en">
 
<head>
 
<head>
 
<meta charset="UTF-8">
 
<meta charset="UTF-8">
 
<style>
 
<style>
−
.trunk, .trunk div {
+
.spinner {
−
    background: #136086;
+
  margin: 100px auto;
−
    /*border-radius:$w;*/
+
  width: 90px;
−
    width: 100px;
+
  height: 90px;
−
    height: 10px;
+
  position: relative;
−
    position: absolute;
+
  text-align: center;
−
    left:50%;
+
 
−
    top:70%;
+
  -webkit-animation: rotate 2.0s infinite linear;
−
    margin-left: -10px;
+
  animation: rotate 2.0s infinite linear;
−
    -webkit-animation-name: rot;
+
−
            animation-name: rot;
+
−
    -webkit-animation-duration: 2.02s;
+
−
            animation-duration: 2.02s;
+
−
    -webkit-animation-iteration-count: infinite;
+
−
            animation-iteration-count: infinite;
+
−
    -webkit-animation-direction: alternate;
+
−
            animation-direction: alternate;
+
−
    -webkit-transform-origin: 5px 5px;
+
−
        -ms-transform-origin: 5px 5px;
+
−
            transform-origin: 5px 5px;
+
−
    -webkit-animation-timing-function: ease-in-out;
+
−
            animation-timing-function: ease-in-out;
+
−
 
+
 
}
 
}
−
.trunk.trunk, .trunk div.trunk {
+
−
    bottom: 0;
+
.dot1, .dot2 {
−
    left: 50%;
+
  width: 60%;
−
    -webkit-animation-name: rot-root;
+
  height: 60%;
−
            animation-name: rot-root;
+
  display: inline-block;
−
    -webkit-animation-duration: 2.5s;
+
  position: absolute;
−
            animation-duration: 2.5s;
+
  top: 0;
 +
  background-color: #67CF22;
 +
  border-radius: 100%;
 +
 
 +
  -webkit-animation: bounce 2.0s infinite ease-in-out;
 +
  animation: bounce 2.0s infinite ease-in-out;
 
}
 
}
−
.trunk > div, .trunk div > div {
+
−
    /*opacity:0.9;*/
+
.dot2 {
−
    top: 0;
+
  top: auto;
−
    left: 100px;
+
  bottom: 0px;
−
    -webkit-animation-duration: calc(inherit / 2);
+
  -webkit-animation-delay: -1.0s;
−
            animation-duration: calc(inherit / 2);
+
  animation-delay: -1.0s;
−
    /* don't works  */
+
 
}
 
}
−
.trunk > div:nth-child(2), .trunk div > div:nth-child(2) {
+
−
    /*animation-duration:15s;*/
+
@-webkit-keyframes rotate { 100% { -webkit-transform: rotate(360deg) }}
−
    -webkit-animation-name: rot-inv;
+
@keyframes rotate { 100% { transform: rotate(360deg); -webkit-transform: rotate(360deg) }}
−
            animation-name: rot-inv;
+
−
    -webkit-animation-duration: 1.7s;
+
@-webkit-keyframes bounce {
−
            animation-duration: 1.7s;
+
  0%, 100% { -webkit-transform: scale(0.0) }
 +
  50% { -webkit-transform: scale(1.0) }
 
}
 
}
−
 
+
−
@-webkit-keyframes rot {
+
@keyframes bounce {
−
    from {
+
  0%, 100% {
−
      -webkit-transform: rotate(15deg) scale(0.72);
+
     transform: scale(0.0);
−
              transform: rotate(15deg) scale(0.72);
+
     -webkit-transform: scale(0.0);
−
    }
+
  } 50% {
−
    to {
+
     transform: scale(1.0);
−
      -webkit-transform: rotate(45deg) scale(0.72);
+
     -webkit-transform: scale(1.0);
−
              transform: rotate(45deg) scale(0.72);
+
  }
−
     }
+
−
}
+
−
 
+
−
@keyframes rot {
+
−
    from {
+
−
      -webkit-transform: rotate(15deg) scale(0.72);
+
−
              transform: rotate(15deg) scale(0.72);
+
−
     }
+
−
    to {
+
−
      -webkit-transform: rotate(45deg) scale(0.72);
+
−
              transform: rotate(45deg) scale(0.72);
+
−
    }
+
−
}
+
−
@-webkit-keyframes rot-inv {
+
−
     from {
+
−
      -webkit-transform: rotate(-45deg) scale(0.72);
+
−
              transform: rotate(-45deg) scale(0.72);
+
−
     }
+
−
    to {
+
−
      -webkit-transform: rotate(-15deg) scale(0.72);
+
−
              transform: rotate(-15deg) scale(0.72);
+
−
    }
+
−
}
+
−
@keyframes rot-inv {
+
−
    from {
+
−
      -webkit-transform: rotate(-45deg) scale(0.72);
+
−
              transform: rotate(-45deg) scale(0.72);
+
−
    }
+
−
    to {
+
−
      -webkit-transform: rotate(-15deg) scale(0.72);
+
−
              transform: rotate(-15deg) scale(0.72);
+
−
    }
+
−
}
+
−
@-webkit-keyframes rot-root {
+
−
    from {
+
−
      -webkit-transform: rotate(-95deg);
+
−
              transform: rotate(-95deg);
+
−
    }
+
−
    to {
+
−
      -webkit-transform: rotate(-85deg);
+
−
              transform: rotate(-85deg);
+
−
    }
+
−
}
+
−
@keyframes rot-root {
+
−
    from {
+
−
      -webkit-transform: rotate(-95deg);
+
−
              transform: rotate(-95deg);
+
−
    }
+
−
    to {
+
−
      -webkit-transform: rotate(-85deg);
+
−
              transform: rotate(-85deg);
+
−
    }
+
 
}
 
}
 
</style>
 
</style>
 
</head>
 
</head>
 
<body>
 
<body>
−
<!-- 代码部分begin -->
+
<div class="spinner">
−
<div class="trunk"><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></div></div></div></div></div></div><div><div><div><div><div><div><div><div></div><div></div></div><div><div></div><div></div></div></div><div><div><div></div><div></div></div><div><div></div><div></div></div></
+
  <div class="dot1"></div>
 +
  <div class="dot2"></div>
 +
</div>
 +
</body>
 +
</html>

Revision as of 15:38, 8 October 2016

<!DOCTYPE html>