html--蝴蝶


<!DOCTYPE html>
<html lang="en" >
<head> 
<meta charset="UTF-8"> 
<title>蝴蝶飞舞</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">     
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace" class="svg-defs">
  
<defs>
    
    
<pattern id='image' width="1" height="1" viewBox="0 0 100 100" preserveAspectRatio="none">
      
<image xlink:href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/pattern_141.gif" width="100" height="100" preserveAspectRatio="none">
</image>
    
</pattern>
    
    
<g id="shape-butterfly-1">
      
<path class="path" fill="" clip-rule="evenodd" d="M8.65,2.85c0.934-0.2,2.15-0.333,3.65-0.4c1.534-0.1,2.667-0.083,3.4,0.05
		c1.533,0.267,3.45,0.767,5.75,1.5c2.466,0.8,4.35,1.617,5.65,2.45c2.066,1.2,3.883,2.383,5.45,3.55c2.567,2.1,4.35,3.8,5.35,5.1
		l2.1,2.5c0.933,1.167,1.517,1.983,1.75,2.45c0.333,0.767,1.083,2.117,2.25,4.05c0.233,0.467,0.717,1.683,1.45,3.65
		c0.733,2.067,1.2,3.45,1.4,4.15c0.467,1.733,0.917,3.767,1.35,6.1l0.4,3.85l-0.25-3.4c-0.6-5.967-1.267-10.25-2-12.85
		c-0.733-2.434-2.167-5.467-4.3-9.1c-0.966-1.667-1.566-3-1.8-4c-0.233-0.933-0.1-1.267,0.4-1c1.3,0.733,2.917,3.867,4.85,9.4
		c1.667,4.7,2.85,11.2,3.55,19.5c0.567,6.934,0.667,11.917,0.3,14.95l0.2,0.05c0.231,0,0.348-0.05,0.35-0.15v0.05l0.1,0.05v27.4
		c-0.032-0.018-0.065-0.035-0.1-0.05v-0.05c-0.7,0.267-0.983,0.117-0.85-0.45c0.067-0.333,0.017-0.817-0.15-1.45
		c-0.2-0.6-0.316-0.983-0.35-1.15l-0.5-1.65c-0.533-2.967-0.833-5.034-0.9-6.2c-0.1-1.533-0.133-2.4-0.1-2.6
		c0-0.933,0.167-1.667,0.5-2.2c0.567-0.9,0.684-1.75,0.35-2.55c-0.167-0.367-0.367-0.6-0.6-0.7c-0.333-0.133-0.517,0.283-0.55,1.25
		c-0.033,1.533-0.167,2.9-0.4,4.1c-0.1,2.3-0.267,3.684-0.5,4.15c-0.333,0.667-1.25,2.95-2.75,6.85c-1.167,2.8-2.233,4.817-3.2,6.05
		c-0.9,1.2-1.583,2.1-2.05,2.7c-0.8,1-1.434,1.667-1.9,2c-2.067,1.333-3.633,2.067-4.7,2.2c-3.033,0.267-4.95,0.317-5.75,0.15
		c-0.8-0.167-1.383-0.217-1.75-0.15c-0.533,0.1-1.033,0.45-1.5,1.05c-0.5,0.667-1.217,1.284-2.15,1.85
		c-0.934,0.567-1.85,0.934-2.75,1.1c-2.467,0.433-4.45,0.25-5.95-0.55c-0.7-0.4-1.467-1.15-2.3-2.25c-0.6-0.867-1.033-1.567-1.3-2.1
		c-0.267-0.667-0.483-1.483-0.65-2.45c-0.3-1.467-0.383-2.717-0.25-3.75c0.267-1.9,0.45-3.05,0.55-3.45
		c0.233-1.233,0.566-2.333,1-3.3C9.25,77.45,9.767,76.4,10,76c0.667-1.233,1.55-2.583,2.65-4.05c1.1-1.434,2.184-2.583,3.25-3.45
		c0.367-0.3,1.15-0.867,2.35-1.7c0.767-0.566,1.917-1.25,3.45-2.05c1.733-0.933,3.267-1.633,4.6-2.1
		c2.133-0.733,4.534-1.467,7.2-2.2c0.467-0.1,1.517-0.3,3.15-0.6c0.967-0.233,0.4-0.4-1.7-0.5c-2.434-0.1-4.534-0.3-6.3-0.6
		c-1.566-0.267-3.383-0.7-5.45-1.3c-2.8-0.8-4.467-1.317-5-1.55c-1.567-0.667-3.2-1.75-4.9-3.25c-1.733-1.533-3-3.1-3.8-4.7
		c-0.533-1.067-0.967-2.434-1.3-4.1c-0.233-1.067-0.3-2.133-0.2-3.2c0.133-0.833,0.183-1.3,0.15-1.4v-0.6
		c-2.467-3.233-3.983-5.433-4.55-6.6c-0.533-1.033-0.883-1.833-1.05-2.4c-0.3-0.867-0.466-1.85-0.5-2.95
		c-0.033-2.367,0.034-4.117,0.2-5.25c0.3-1.034,0.483-1.8,0.55-2.3c0.167-0.867,0.034-1.533-0.4-2c-0.6-0.7-1.133-1.517-1.6-2.45
		c-0.566-1.133-0.833-2.117-0.8-2.95c0.033-1.333,0.167-2.367,0.4-3.1c0.367-1.267,1.05-2.267,2.05-3
		C4.417,4.25,6.483,3.317,8.65,2.85z"/>
    <g>
      
  </defs>
</svg>
      
<section class="background"></section>
      
<section class="scene3d">
  
  <div class="cube skybox">
    <var class="scale">
    <figure class="face front"></figure>
    <figure class="face back"></figure>
    <figure class="face right"></figure>
    <figure class="face left"></figure>
    <figure class="face top"></figure>
    <figure class="face bottom"></figure>
    </var>
  </div>
  
  <div class="butterfly_container">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100" class="icon shape-codepen">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
  
  <div class="butterfly_container" 
       style="margin-top: -150px; margin-left: 140px;
 
              -webkit-animation-duration: 5s;
              -moz-animation-duration: 5s;
              -ms-animation-duration: 5s;
              -o-animation-duration: 5s;
              animation-duration: 5s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
  
  <div class="butterfly_container scale_half" 
       style="margin-top: -10px; margin-left: 50px;
              -webkit-animation-duration: 5s;
              -moz-animation-duration: 5s;
              -ms-animation-duration: 5s;
              -o-animation-duration: 5s;
              animation-duration: 5s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .75s;
                  -moz-animation-duration: .75s;
                  -ms-animation-duration: .75s;
                  -o-animation-duration: .75s;
                  animation-duration: .75s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
  
  <div class="butterfly_container scale_half" 
       style="margin-top: 20px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1s;
                  -moz-animation-duration: 1s;
                  -ms-animation-duration: 1s;
                  -o-animation-duration: 1s;
                  animation-duration: 1s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1s;
                  -moz-animation-duration: 1s;
                  -ms-animation-duration: 1s;
                  -o-animation-duration: 1s;
                  animation-duration: 1s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>

  <div class="butterfly_container scale_half" 
       style="margin-top: 100px; margin-left: 50px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1.2s;
                  -moz-animation-duration: 1.2s;
                  -ms-animation-duration: 1.2s;
                  -o-animation-duration: 1.2s;
                  animation-duration: 1.2s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: 1.2s;
                  -moz-animation-duration: 1.2s;
                  -ms-animation-duration: 1.2s;
                  -o-animation-duration: 1.2s;
                  animation-duration: 1.2s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
  
  <div class="butterfly_container scale_third" 
       style="margin-top: 150px;
              -webkit-animation-duration: 20s;
              -moz-animation-duration: 20s;
              -ms-animation-duration: 20s;
              -o-animation-duration: 20s;
              animation-duration: 20s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .35s;
                  -moz-animation-duration: .35s;
                  -ms-animation-duration: .35s;
                  -o-animation-duration: .35s;
                  animation-duration: .35s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .35s;
                  -moz-animation-duration: .35s;
                  -ms-animation-duration: .53s;
                  -o-animation-duration: .35s;
                  animation-duration: .35s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
  
  <div class="butterfly_container scale_third" 
       style="margin-top: -250px; margin-left: 300px; 
              -webkit-animation-duration: 4s;
              -moz-animation-duration: 4s;
              -ms-animation-duration: 4s;
              -o-animation-duration: 4s;
              animation-duration: 4s;">
    <var class="rotate3d">
    <var class="scale">
    <var class="translate3d">
    <var class="translate3d-1">
    <figure class="butterfly">
      <svg class="wing left" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .45s;
                  -moz-animation-duration: .45s;
                  -ms-animation-duration: .45s;
                  -o-animation-duration: .45s;
                  animation-duration: .45s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
      <svg class="wing right" viewBox="0 0 50 100"
           style="-webkit-animation-duration: .45s;
                  -moz-animation-duration: .45s;
                  -ms-animation-duration: .45s;
                  -o-animation-duration: .45s;
                  animation-duration: .45s;">
        <use class="left" xlink:href="#shape-butterfly-1"></use>
      </svg> 
    </figure>
    </var>
    </var>
    </var>
    </var>
  </div>
 
</section>
  
  

</body>

</html>

css

/**
* MIXINS
*/
/* SYMBOLS */
/**
  * KEYFRAMES
  */
@-webkit-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-moz-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-ms-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-o-keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@keyframes rotating {
  0% {
    -webkit-transform: rotate3d(0, 0, 0, 0deg);
    -moz-transform: rotate3d(0, 0, 0, 0deg);
    -ms-transform: rotate3d(0, 0, 0, 0deg);
    -o-transform: rotate3d(0, 0, 0, 0deg);
    transform: rotate3d(0, 0, 0, 0deg);
  }
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 720deg);
    -moz-transform: rotate3d(0, 1, 0, 720deg);
    -ms-transform: rotate3d(0, 1, 0, 720deg);
    -o-transform: rotate3d(0, 1, 0, 720deg);
    transform: rotate3d(0, 1, 0, 720deg);
  }
}
@-webkit-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-moz-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-ms-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@-o-keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
@keyframes rotatingY {
  100% {
    -webkit-transform: rotateY(-360deg);
    -moz-transform: rotateY(-360deg);
    -ms-transform: rotateY(-360deg);
    -o-transform: rotateY(-360deg);
    transform: rotateY(-360deg);
  }
}
/**/
@-webkit-keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -ms-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
}
@-moz-keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -ms-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
}
@-ms-keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -ms-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
}
@-o-keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -ms-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
}
@keyframes fluttering {
  0%, 25%, 50%, 75%, 100% {
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  10%, 60% {
    -webkit-transform: translate3d(0, 150px, 0);
    -moz-transform: translate3d(0, 150px, 0);
    -ms-transform: translate3d(0, 150px, 0);
    -o-transform: translate3d(0, 150px, 0);
    transform: translate3d(0, 150px, 0);
  }
  30%, 80% {
    -webkit-transform: translate3d(0, 50px, 0);
    -moz-transform: translate3d(0, 50px, 0);
    -ms-transform: translate3d(0, 50px, 0);
    -o-transform: translate3d(0, 50px, 0);
    transform: translate3d(0, 50px, 0);
  }
}
/**/
@-webkit-keyframes left-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}
@-moz-keyframes left-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}
@-ms-keyframes left-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}
@-o-keyframes left-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}
@keyframes left-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(1) rotate3d(0, 1, 0, 60deg);
  }
}
@-webkit-keyframes right-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}
@-moz-keyframes right-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}
@-ms-keyframes right-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}
@-o-keyframes right-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}
@keyframes right-wing-flap {
  0% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
  50% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, -70deg);
  }
  100% {
    -webkit-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -moz-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -ms-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    -o-transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
    transform: translate3d(0, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 60deg);
  }
}
/**
 *
 */
/**
  * SOURCE
  */
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.background {
  position: absolute;
  width: 100%;
  height: 100%;
}

.scene3d {
  -webkit-perspective: 1000px;
  -moz-perspective: 1000px;
  -ms-perspective: 1000px;
  -o-perspective: 1000px;
  perspective: 1000px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}

.skybox.cube {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 512px;
  height: 512px;
  margin-left: -256px;
  margin-top: -256px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotatingY 40s linear infinite;
  -moz-animation: rotatingY 40s linear infinite;
  -ms-animation: rotatingY 40s linear infinite;
  -o-animation: rotatingY 40s linear infinite;
  animation: rotatingY 40s linear infinite;
}
.skybox.cube var.scale {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 512px;
  height: 512px;
  margin-left: -256px;
  margin-top: -256px;
  -webkit-perspective-origin: 50% 50%;
  -moz-perspective-origin: 50% 50%;
  -ms-perspective-origin: 50% 50%;
  -o-perspective-origin: 50% 50%;
  perspective-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
  -moz-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
  -ms-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
  -o-transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
  transform: rotate3d(0, 0, 1, 15deg) translate3d(0, 100px, 0) scale3d(4, 6, 4);
}
.skybox.cube .face {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 512px;
  height: 512px;
  margin-left: -256px;
  margin-top: -256px;
  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  -ms-backface-visibility: hidden;
  -o-backface-visibility: hidden;
  backface-visibility: hidden;
}
.skybox.cube .face.front {
  -webkit-transform: rotateY(0deg) translateZ(-256px);
  -moz-transform: rotateY(0deg) translateZ(-256px);
  -ms-transform: rotateY(0deg) translateZ(-256px);
  -o-transform: rotateY(0deg) translateZ(-256px);
  transform: rotateY(0deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_front.jpg");
}
.skybox.cube .face.back {
  -webkit-transform: rotateY(180deg) translateZ(-256px);
  -moz-transform: rotateY(180deg) translateZ(-256px);
  -ms-transform: rotateY(180deg) translateZ(-256px);
  -o-transform: rotateY(180deg) translateZ(-256px);
  transform: rotateY(180deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_back.jpg");
}
.skybox.cube .face.right {
  -webkit-transform: rotateY(-90deg) translateZ(-256px);
  -moz-transform: rotateY(-90deg) translateZ(-256px);
  -ms-transform: rotateY(-90deg) translateZ(-256px);
  -o-transform: rotateY(-90deg) translateZ(-256px);
  transform: rotateY(-90deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_right.jpg");
}
.skybox.cube .face.left {
  -webkit-transform: rotateY(90deg) translateZ(-256px);
  -moz-transform: rotateY(90deg) translateZ(-256px);
  -ms-transform: rotateY(90deg) translateZ(-256px);
  -o-transform: rotateY(90deg) translateZ(-256px);
  transform: rotateY(90deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_left.jpg");
}
.skybox.cube .face.top {
  -webkit-transform: rotateX(-90deg) translateZ(-256px);
  -moz-transform: rotateX(-90deg) translateZ(-256px);
  -ms-transform: rotateX(-90deg) translateZ(-256px);
  -o-transform: rotateX(-90deg) translateZ(-256px);
  transform: rotateX(-90deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/clouds_top.jpg");
}
.skybox.cube .face.bottom {
  -webkit-transform: rotateX(90deg) translateZ(-256px);
  -moz-transform: rotateX(90deg) translateZ(-256px);
  -ms-transform: rotateX(90deg) translateZ(-256px);
  -o-transform: rotateX(90deg) translateZ(-256px);
  transform: rotateX(90deg) translateZ(-256px);
  background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/78881/hazy_lake_top.jpg");
  background: none;
}

.butterfly_container {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-animation: rotatingY 10s linear infinite;
  -moz-animation: rotatingY 10s linear infinite;
  -ms-animation: rotatingY 10s linear infinite;
  -o-animation: rotatingY 10s linear infinite;
  animation: rotatingY 10s linear infinite;
}
.butterfly_container var {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.butterfly_container var.rotate3d {
  -webkit-transform: rotate3d(1, 0.5, 0, 70deg);
  -moz-transform: rotate3d(1, 0.5, 0, 70deg);
  -ms-transform: rotate3d(1, 0.5, 0, 70deg);
  -o-transform: rotate3d(1, 0.5, 0, 70deg);
  transform: rotate3d(1, 0.5, 0, 70deg);
}
.butterfly_container var.translate3d {
  -webkit-transform: translate3d(-300px, 0px, 0px);
  -moz-transform: translate3d(-300px, 0px, 0px);
  -ms-transform: translate3d(-300px, 0px, 0px);
  -o-transform: translate3d(-300px, 0px, 0px);
  transform: translate3d(-300px, 0px, 0px);
}
.butterfly_container var.translate3d-1 {
  -webkit-animation: fluttering 10s ease-in-out infinite;
  -moz-animation: fluttering 10s ease-in-out infinite;
  -ms-animation: fluttering 10s ease-in-out infinite;
  -o-animation: fluttering 10s ease-in-out infinite;
  animation: fluttering 10s ease-in-out infinite;
}
.butterfly_container.scale_half var.scale {
  -webkit-transform: scale3d(0.5, 0.5, 0.5);
  -moz-transform: scale3d(0.5, 0.5, 0.5);
  -ms-transform: scale3d(0.5, 0.5, 0.5);
  -o-transform: scale3d(0.5, 0.5, 0.5);
  transform: scale3d(0.5, 0.5, 0.5);
}
.butterfly_container.scale_third var.scale {
  -webkit-transform: scale3d(0.333, 0.333, 0.333);
  -moz-transform: scale3d(0.333, 0.333, 0.333);
  -ms-transform: scale3d(0.333, 0.333, 0.333);
  -o-transform: scale3d(0.333, 0.333, 0.333);
  transform: scale3d(0.333, 0.333, 0.333);
}
.butterfly_container.scale_quarter var.scale {
  -webkit-transform: scale3d(0.25, 0.25, 0.25);
  -moz-transform: scale3d(0.25, 0.25, 0.25);
  -ms-transform: scale3d(0.25, 0.25, 0.25);
  -o-transform: scale3d(0.25, 0.25, 0.25);
  transform: scale3d(0.25, 0.25, 0.25);
}
.butterfly_container figure.butterfly {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100px;
  height: 100px;
  margin-left: -50px;
  margin-top: -50px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
}
.butterfly_container figure.butterfly .wing {
  position: absolute;
  width: 50px;
  height: 100px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  -webkit-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -moz-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -ms-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  -o-transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
  transform: translate3d(0, 0, 0) rotate3d(1, 0.5, 0, 45deg);
}
.butterfly_container figure.butterfly .wing.right {
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
  -moz-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
  -ms-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
  -o-transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
  transform: translate3d(0px, 0, 0) scaleX(-1) rotate3d(0, 1, 0, 45deg);
  -webkit-animation: right-wing-flap 0.5s ease-in-out infinite;
  -moz-animation: right-wing-flap 0.5s ease-in-out infinite;
  -ms-animation: right-wing-flap 0.5s ease-in-out infinite;
  -o-animation: right-wing-flap 0.5s ease-in-out infinite;
  animation: right-wing-flap 0.5s ease-in-out infinite;
  filter: FlipH;
  -ms-filter: "FlipH";
}
.butterfly_container figure.butterfly .wing.left {
  -webkit-transform-origin: 50px 50px;
  -moz-transform-origin: 50px 50px;
  -ms-transform-origin: 50px 50px;
  -o-transform-origin: 50px 50px;
  transform-origin: 50px 50px;
  -webkit-animation: left-wing-flap 0.5s ease-in-out infinite;
  -moz-animation: left-wing-flap 0.5s ease-in-out infinite;
  -ms-animation: left-wing-flap 0.5s ease-in-out infinite;
  -o-animation: left-wing-flap 0.5s ease-in-out infinite;
  animation: left-wing-flap 0.5s ease-in-out infinite;
}
.butterfly_container figure.butterfly .wing use {
  display: block;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  fill: url(#image);
  stroke: white;
}

.svg-defs {
  position: absolute;
  height: 0;
  width: 0;
}

在这里插入图片描述

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/468775.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

基于GEC6818的QT开发之——通过不同按键控制DHT11模块的数据采集与动态显示

基于GEC6818的QT开发之——通过不同按键控制DHT11模块的数据采集与动态显示

基于GEC6818的QT开发之——通过不同按键控制DHT11模块的数据采集与动态显示 使用环境: ubantu16 QT5.7 开发板GEC6818 实现要求&#xff1a; 利用A53按键1、按键2与温湿度传感器完成QT界面动态显示温湿度记录&#xff0c;并指定温湿度记录超过指定范围&#xff0c;进行报警&…
阅读更多...
自主可控|工业机箱/控制器助力打造高性能、超稳定测试系统！

自主可控|工业机箱/控制器助力打造高性能、超稳定测试系统！

产品介绍 PXIeC-7318GN3L1-21DBM 是一款拥有出色性能和创新功能的18槽PXI Express机箱&#xff0c;具备1个system插槽和17个hybrid外设插槽&#xff0c;采用hybrid插槽设计&#xff0c;可以安装Compact PCI、PXI、Compact PCl Express和PXI Express模组到任何外设插槽内&…
阅读更多...
PONAR电比例控制阀驱动器

PONAR电比例控制阀驱动器

控制PONAR WADOWICE比例方向阀&#xff0c;比例流量阀&#xff0c;比例压力阀&#xff0c;比例插装阀控制器放大器放大板&#xff0c;控制阀系列&#xff1a;WDUD10、WDUD6、WZCDE4、WZRS6、WZCR6、3WZCDE6、WZCPE10、WZPPE10、WZPSE20、WZPPE20、WZPSE10、WZPSE6、WZPPE10、WZ…
阅读更多...
用Python直接获取Word文档页数、字数、段落数、节数等信息

用Python直接获取Word文档页数、字数、段落数、节数等信息

计算 Word 文档的页数、字数等信息是出版、学术和内容管理等领域的一项基本任务。准确的页数和字数对于评估文档长度、估算印刷成本、分析文本复杂性以及确保符合格式化指南至关重要。逐个预览文档查看相关信息是非常麻烦的事情&#xff0c;我们可以在不预览文档的情况下&#…
阅读更多...
产品说明书VS产品规格书：有什么区别

产品说明书VS产品规格书：有什么区别

产品说明书和产品规格书是两个不同的文档&#xff0c;虽然它们都涉及到产品的描述和细节&#xff0c;但侧重点和用途有所不同。 | 内容侧重点不同 产品说明书更侧重于向用户解释产品的使用方法和操作细节。它就像是一本用户手册&#xff0c;告诉用户如何安装、操作、维护和保养…
阅读更多...
记录收支明细，轻松导出表格，让家庭财务一目了然！

记录收支明细，轻松导出表格，让家庭财务一目了然！

随着生活节奏的加快&#xff0c;家庭财务管理变得越来越重要。想要掌握家庭的收支情况&#xff0c;合理规划预算&#xff0c;却常常被琐碎的账目和复杂的表格困扰&#xff1f;别担心&#xff0c;我们为您带来一款全新的家庭财务管理工具&#xff0c;让您轻松记录收支明细&#…
阅读更多...
【教程】APP加固的那些小事情

【教程】APP加固的那些小事情

摘要 APP加固是保护APP代码逻辑的重要手段&#xff0c;通过隐藏、混淆、加密等操作提高软件的逆向成本&#xff0c;降低被破解的几率&#xff0c;保障开发者和用户利益。本文将介绍APP加固常见失败原因及解决方法&#xff0c;以及处理安装出现问题的情况和资源文件加固策略选择…
阅读更多...
手把手教你搭建雾锁王国Enshrouded服务器

手把手教你搭建雾锁王国Enshrouded服务器

免费自建雾锁王国Enshrouded服务器&#xff0c;先领取阿里云300元无门槛代金券&#xff0c;然后在雾锁王国Enshrouded专题页一键部署&#xff0c;不需要基础&#xff0c;鼠标点选即可10秒钟创建一台雾锁王国游戏服务器&#xff0c;超简单&#xff0c;阿里云服务器网aliyunfuwuq…
阅读更多...
Redis @type的一个坑

Redis @type的一个坑

redis中type导致取数据解析报错 java.lang.ClassCastException: com.alibaba.fastjson.JSONObject cannot be cast to 新建一个对象存入redis中&#xff0c;对象中会出现一个字段type LoginUser user new LoginUser () ...... redisTemplate.opsForValue().set(key, user)存…
阅读更多...
k8s集群部署elk

k8s集群部署elk

一、前言 本次部署elk所有的服务都部署在k8s集群中&#xff0c;服务包含filebeat、logstash、elasticsearch、kibana&#xff0c;其中elasticsearch使用集群的方式部署&#xff0c;所有服务都是用7.17.10版本 二、部署 部署elasticsearch集群 部署elasticsearch集群需要先优化…
阅读更多...
洗涤杂质气体的仪器-PFA洗涤瓶

洗涤杂质气体的仪器-PFA洗涤瓶

PFA洗气瓶是一种洗去气体中杂质的仪器&#xff0c;是将不纯气体通过选定的适宜液体介质鼓泡吸收&#xff08;溶解或由于发生化学反应&#xff09;&#xff0c;从而洗去杂质气体&#xff0c;以达净化气体的目的。在有可燃性气源的实验装置中&#xff0c;洗气瓶也可起到安全瓶的作…
阅读更多...
基于Spring Boot框架的玩具销售系统的设计与实现

基于Spring Boot框架的玩具销售系统的设计与实现

摘 要 随着信息时代的来临&#xff0c;过去的传统管理方式缺点逐渐暴露&#xff0c;对过去的传统管理方式的缺点进行分析&#xff0c;采取计算机方式构建玩具销售系统。本文通过课题背景、课题目的及意义相关技术&#xff0c;提出了一种玩具信息、购买订单、退货申请、换货申请…
阅读更多...
AI算力池化赋能企业大模型价值探索

AI算力池化赋能企业大模型价值探索

1. 大语言模型企业落地中的算力痛点 随着人工智能技术的飞速发展&#xff0c;自然语言处理&#xff08;NLP&#xff09;成为了热门的研究领域之一。在这一领域中&#xff0c;大语言模型&#xff08;Large Language Models&#xff09;凭借其强大的语言理解和生成能力&#xff…
阅读更多...
每日OJ题_牛客HJ75 公共子串计算（IO型OJ）

每日OJ题_牛客HJ75 公共子串计算（IO型OJ）

目录 牛客HJ75 公共子串计算 解析代码 牛客HJ75 公共子串计算 公共子串计算_牛客题霸_牛客网 解析代码 #include <iostream> using namespace std; int main() {string str1 "", str2 "";cin >> str1 >> str2;int n1 str1.size()…
阅读更多...
性能测试-Jmeter常用元件基础使用

性能测试-Jmeter常用元件基础使用

一、Jmeter元件 #线程组 添加HTTP请求 #配置元件 配置元件内的元件都是用于进行初始化的东西 #监听器 监听器主要是用来获取我们使用取样器发送请求后的响应数据相关信息 #定时器 定时器主要用来控制我们多久后执行该取样器&#xff08;发送请求&#xff09; #前置处理器 前置处…
阅读更多...
测试工具分享：高效完成测试工作！

测试工具分享：高效完成测试工作！

说在前头 在社会上&#xff0c;特别是技术圈&#xff0c;大家会有刻板印象&#xff1a;测试工作的含金量不高。因为大家觉得测试不重要&#xff0c;导致给测试的薪水也偏低&#xff1b;这又反向导致好的人才不想来测试行业&#xff0c;测试从业人员的平均水平、工作体现的价值…
阅读更多...
【ArcPy】栅格数据渲染

【ArcPy】栅格数据渲染

import arcpy # 输入数据 inRaster arcpy.Raster(r"C:\测试数据\dem\归一化处理.tif") # 用线性拉伸和NDVI配色方案渲染栅格 rendered_raster arcpy.Render(inRaster, rendering_rule{min: 0, max: 0.8}, colormapNDVI) #栅格单独一行可将栅格数据直接显示 rendere…
阅读更多...
打开磁盘清理工具的9种方法，总有一种适合你

打开磁盘清理工具的9种方法，总有一种适合你

前言 你可以在Windows 10和11上使用许多第三方磁盘清理工具来进行清理。但是，别忘了Windows包含自己的磁盘清理工具，你可以使用该工具释放硬盘存储空间。一些第三方替代方案可能有更广泛的清理选项和功能，但磁盘清理仍然是消除多余文件的完美工具。 每个用户都应该不时地进…
阅读更多...
使用 Python 编写网络爬虫：从入门到实战

使用 Python 编写网络爬虫：从入门到实战

网络爬虫是一种自动化获取网页信息的程序&#xff0c;通常用于数据采集、信息监控等领域。Python 是一种广泛应用于网络爬虫开发的编程语言&#xff0c;具有丰富的库和框架来简化爬虫的编写和执行过程。本文将介绍如何使用 Python 编写网络爬虫&#xff0c;包括基本原理、常用库…
阅读更多...
LLM流式方案解决方案和客户端解决方案

LLM流式方案解决方案和客户端解决方案

背景 接上一篇《LLM大模型统一封装接口解决方案》架构确定后&#xff0c;流式方案非常规请求&#xff0c;需要特殊处理。 本解决方案就是针对上一篇中所需要的流式&#xff08;打字机效果进行编码&#xff09; 什么是SSE SSE&#xff08;Server-Sent Events&#xff0c;服务器发…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站