SOURCE

console 命令行工具 X clear

                    
>
console
var btnText = $('.hover_btn').text();

$('.hover_btn').click(function() {
  $('.robot').toggleClass('animation');
  if ($(this).text() === 'CLICK ME') {
    $(this).text('IM HOVERING');
  } else {
    $(this).text('CLICK ME');
  }
});
<div class="main_container">
  <div class="robot">
    <!-- Generator: Adobe Illustrator 20.1.0, SVG Export Plug-In -->
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/" x="0px" y="0px"
    width="204px" height="301.6px" viewBox="0 0 204 301.6" style="overflow:scroll;enable-background:new 0 0 204 301.6;"
    xml:space="preserve">
      <defs>
      </defs>
      <g id="robot_1_">
        <g>
          <path class="st0" d="M183.4,213.2l-11.8-10c-0.5,3-1.2,5.9-2.1,8.8l4.5,2.5l26.7,14.7c0.4,0.2,0.9,0,1.1-0.3L183.4,213.2z"
          />
        </g>
        <g>
          <path class="st0" d="M20.5,213.2l11.8-10c0.5,3,1.2,5.9,2.1,8.8l-4.5,2.5L3.1,229.2c-0.4,0.2-0.9,0-1.1-0.3L20.5,213.2z"
          />
        </g>
        <path class="st0" d="M102.6,14.4c-4.1,0-7.5-2.7-8.6-6.5c-0.2,0.8-0.4,1.6-0.4,2.5c0,4.9,4,9,9,9s9-4,9-9c0-0.9-0.1-1.7-0.4-2.5
        C110.1,11.7,106.7,14.4,102.6,14.4z" />
        <path class="st1" d="M99,50.6C75.4,52.4,56.4,71.5,54.8,95c-0.1,1.3-0.1,2.5-0.1,3.7c0.1,17.9,13,33.2,30.5,37
        c5.5,1.2,11.4,1.9,17.4,1.9c6.1,0,11.9-0.7,17.4-1.9c17.5-3.8,30.4-19.1,30.5-37c0-0.1,0-0.2,0-0.3C150.6,70.8,127.1,48.6,99,50.6z
        " />
        <path class="st0" d="M120.1,127.8c-5.5,1.2-11.4,1.9-17.4,1.9c-6.1,0-11.9-0.7-17.4-1.9c-16.4-3.6-28.7-17.1-30.3-33.5
        c0,0.3-0.1,0.5-0.1,0.8c-0.1,1.3-0.1,2.5-0.1,3.7c0.1,17.9,13,33.2,30.5,37c5.5,1.2,11.4,1.9,17.4,1.9c6.1,0,11.9-0.7,17.4-1.9
        c17.5-3.8,30.4-19.1,30.5-37c0-0.1,0-0.2,0-0.3c0-1.4-0.1-2.8-0.2-4.2C148.7,110.7,136.4,124.2,120.1,127.8z"
        />
        <path class="st0" d="M102.6,157.5c-36.8,0-67-28.4-69.8-64.6c-0.1,1.8-0.2,3.6-0.2,5.5c0,38.7,31.4,70.1,70.1,70.1
        c38.7,0,70.1-31.4,70.1-70.1c0-1.9-0.1-3.7-0.2-5.5C169.6,129.1,139.5,157.5,102.6,157.5z" />
        <circle class="st2" cx="102.6" cy="10.5" r="9" />
        <path class="st3" d="M115.2,64.4c-0.9-2-2.7-3.5-4.8-4.2c-5.4-2-19.6-5.6-33.8,4.5C64.9,73,57,103.1,77.9,97.9
        C96.9,93.1,120.7,76.1,115.2,64.4z" />
        <path class="st4" d="M3.2,229.2c-0.7,0.4-1.5-0.4-1.1-1.1l14.7-26.7l15.6-28.2c0.3-0.5,0.9-0.6,1.3-0.2L46,185.3l12.3,12.3
        c0.4,0.4,0.3,1-0.2,1.3l-28.2,15.6L3.2,229.2z" />
        <path class="st4" d="M200.8,229.2c0.7,0.4,1.5-0.4,1.1-1.1l-14.7-26.7l-15.6-28.2c-0.3-0.5-0.9-0.6-1.3-0.2L158,185.3l-12.3,12.3
        c-0.4,0.4-0.3,1,0.2,1.3l28.2,15.6L200.8,229.2z" />
        <path class="st3" d="M32.5,191.1c0,38.7,31.4,70.1,70.1,70.1c38.7,0,70.1-31.4,70.1-70.1c0-6.3-0.9-12.3-2.4-18.3H35
        C33.4,178.8,32.5,184.8,32.5,191.1z" />
        <path class="st0" d="M102.6,251.2c-37,0-67.4-28.8-69.9-65.2c-0.1,1.7-0.2,3.4-0.2,5.1c0,38.7,31.4,70.1,70.1,70.1
        c38.7,0,70.1-31.4,70.1-70.1c0-1.7-0.1-3.4-0.2-5.1C170,222.4,139.7,251.2,102.6,251.2z" />
        <g>
          <path class="st5" d="M77.5,291.5c7.2,4.8,15.8,7.7,25.1,7.7c9.2,0,17.7-2.8,24.9-7.5"
          />
          <path class="st5" d="M121.6,281.5c-5.4,3.8-11.9,6-19,6c-7.2,0-13.8-2.3-19.2-6.1"
          />
          <path class="st5" d="M116.4,271.5c-3.8,2.9-8.6,4.6-13.8,4.6c-5.3,0-10.1-1.8-14-4.8"
          />
          <path class="st5" d="M83.4,281.3c5.4,3.9,12.1,6.1,19.2,6.1c7.1,0,13.6-2.2,19-6"
          />
        </g>
        <path class="st4" d="M32.5,191.1c0,38.7,31.4,70.1,70.1,70.1c38.7,0,70.1-31.4,70.1-70.1c0-6.3-0.9-12.3-2.4-18.3H35
        C33.4,178.8,32.5,184.8,32.5,191.1z" />
        <circle class="st4" cx="102.6" cy="98.5" r="70.1" />
      </g>
    </svg>
  </div>
  <button class="hover_btn">
    CLICK ME
  </button>
</div>
@import 'https://fonts.googleapis.com/css?family=Nunito';
* {
  font-family: 'Nunito', sans-serif;
}

.main_container {
  width: 400px;
  height: 500px;
  background: #fff;
  border: 1px solid #fff;
  margin: 0px auto;
  margin-top: 150px;
}

.robot {
  width: 204px;
  height: auto;
  margin: auto;
  position: relative;
}

.animation {
  animation: hover 10s cubic-bezier(0.12, 0.9, 0.9, 0.9) infinite;
}

.hover_btn {
  position: relative;
  width: 200px;
  height: 50px;
  display: block;
  border-radius: 50px;
  background: #70d8ff;
  border: none;
  box-shadow: none;
  margin: 150px auto;
  color: #fff;
  font-size: 1.2em;
  letter-spacing: 1px;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

.hover_btn:hover {
  cursor: pointer;
  margin-top: 140px;
  box-shadow: 0px 5px 3px #99c4ff;
}

.hover_btn:focus {
  outline: none !important;
}

@-moz-keyframes hover {
  0% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(60px);
  }
  60% {
    transform: translateY(120px);
  }
  80% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(20px);
  }
}

@-webkit-keyframes hover {
  0% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(60px);
  }
  60% {
    transform: translateY(120px);
  }
  80% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(20px);
  }
}

@-o-keyframes hover {
  0% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(60px);
  }
  60% {
    transform: translateY(120px);
  }
  80% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(20px);
  }
}

@keyframes hover {
  0% {
    transform: translateY(20px);
  }
  20% {
    transform: translateY(60px);
  }
  60% {
    transform: translateY(120px);
  }
  80% {
    transform: translateY(60px);
  }
  100% {
    transform: translateY(20px);
  }
}

.st0 {
  opacity: 0.5;
  fill: #D3D8F7;
}

.st1 {
  fill: #70D8FF;
}

.st2 {
  fill: none;
  stroke: #70D8FF;
  stroke-width: 3;
  stroke-miterlimit: 10;
}

.st3 {
  fill: #FFFFFF;
}

.st4 {
  fill: none;
  stroke: #70D8FF;
  stroke-width: 4;
  stroke-miterlimit: 10;
}

.st5 {
  fill: none;
  stroke: #70D8FF;
  stroke-width: 5;
  stroke-miterlimit: 10;
}