TweenMax+svg实现大熊猫激光工厂运转动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：TweenMax+svg实现大熊猫激光工厂运转动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>


  
  
<style>
/* ------------------------------------*
       BEST VIEWED FULL-SCREEN:
   https://codepen.io/sdras/full/waXKPw/
*--------------------------------------*/

body {
  font-family: 'Oswald', sans-serif;
  color: white;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #91CAC7;
}

h2 {
  font-weight: normal;
  width: 90%;
  margin-left: 5%;
  text-align: center;
}

svg {
  transition: all 0.5s ease;
}

.size {
  position: absolute;
  right: 0;
  top: 20px;
  width: 70px;
  height: 115px;
  letter-spacing: 0.02em;
  opacity: 0.65;
  font-size: 15px;
  padding: 20px;
  border-radius: 10px 0 0 10px;
  background: #4E3440;
}

.container {
  width: 900px;
  margin: 10px auto;
}

.first {
  height: auto;
  z-index: 30;
}

.second {
  z-index: 50;
  height: auto;
}

.third {
  height: auto;
  z-index: 1;
}

#button,
#handle1,
#handle2 {
  cursor: pointer;
  position: relative;
  z-index: 5000;
}

#smoke circle,
#smoke path,
#paint,
#panda,
#panda2,
#panda3 {
  visibility: hidden;
}

@media screen and (max-width: 730px) {
  .container {
    width: 100% !important;
  }
  .sm-foot {
    display: none;
  }
  svg {
    position: relative;
  }
  .size {
    display: none;
  }
  .first {
    width: 100%;
  }
  .second {
    width: 70%;
    top: -90px;
    margin-left: 70px;
    transform: scaleX(-1) !important;
  }
  .third {
    width: 60%;
    margin-left: 70px;
    top: -135px;
  }
}

@media screen and (min-width: 731px) {
  .foot {
    display: none;
  }
  svg {
    position: absolute;
  }
  .first {
    width: 550px;
  }
  .second {
    width: 350px;
    margin-left: 365px;
    top: 370px !important;
  }
  .third {
    width: 330px;
    top: 514px !important;
  }
}
</style>



</head>

<body  >
  <div class="container">
  <h2>Click the hotspots to make Huggy Laser Pandas</h2>
  <div class="size">Size the browser window down horizontally</div>
  <svg class="first" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 468.4">
    <path fill="#FFF" d="M299.7 150v-39.9c0-2.7-2.2-4.9-4.9-4.9h-39.4v-.7h39.4c3.1 0 5.6 2.5 5.6 5.6V150h-.7z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M225.3 20.9h1.2v68.9h-1.2zM231.9 112.4h2.3v161.7h-2.3z" />
    <path fill="#FFF" d="M330.1 211.9v-6.8c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7z" />
    <path fill="#4E3440" d="M298.9 167h2.3v4.8h-2.3z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#EAEAEA" d="M321.3 193.2c0 11.9-9.6 21.5-21.5 21.5s-21.5-9.6-21.5-21.5 9.6-21.5 21.5-21.5 21.5 9.6 21.5 21.5z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M284.5 178c-8.4 8.4-8.4 22 0 30.4l30.4-30.4c-8.4-8.4-22-8.4-30.4 0z" />
    <path fill="#FFF" d="M270 184.7c0 .6-.5 1.1-1.1 1.1h-3.6c-.6 0-1.1-.5-1.1-1.1 0-.6.5-1.1 1.1-1.1h3.6c.6 0 1.1.5 1.1 1.1z" />
    <path fill="#FFF" d="M267.9 173.1V186c0 2.7 2.2 4.9 4.9 4.9h24.6v1.5h-24.6c-3.5 0-6.4-2.9-6.4-6.4v-12.9h1.5z" />
    <path fill="#EAEAEA" d="M274.7 175.7c0 4.2-3.4 7.6-7.6 7.6-4.2 0-7.6-3.4-7.6-7.6 0-4.2 3.4-7.6 7.6-7.6 4.2 0 7.6 3.4 7.6 7.6z" />
    <path fill="#FFF" d="M263 181.8c-3.4-2.4-4.3-7.1-1.9-10.5 2.4-3.4 7.1-4.3 10.5-1.9-3.4 4.7-4 5.8-8.6 12.4z" />
    <path fill="#4E3440" d="M267.1 183.7c-4.4 0-8-3.6-8-8s3.6-8 8-8 8 3.6 8 8-3.6 8-8 8zm0-15.2c-3.9 0-7.2 3.2-7.2 7.1 0 3.9 3.2 7.2 7.2 7.2 3.9 0 7.2-3.2 7.2-7.2 0-3.9-3.3-7.1-7.2-7.1z" />
    <path fill="#4E3440" d="M266.1 176.2c-.3-.4-.3-1.1.2-1.4.4-.3 1.1-.3 1.4.2.3.5 2 4.3 2 4.3s-3.3-2.7-3.6-3.1z" />
    <path fill="#FFF" d="M259.5 264.2v-28.3c0-2.7 2.2-4.9 4.9-4.9h19.5v-.7h-19.5c-3.1 0-5.6 2.5-5.6 5.6v28.3h.7zM259.8 209.4c0 4.1-3.3 7.4-7.4 7.4-4.1 0-7.4-3.3-7.4-7.4 0-4.1 3.3-7.4 7.4-7.4 4.1 0 7.4 3.3 7.4 7.4z" />
    <path fill="#368426" d="M247.6 211.3c.6 2.1 2.6 3.6 4.8 3.6 2.3 0 4.2-1.5 4.8-3.6h-9.6z" />
    <path fill="#FFF" d="M299.7 137.7v13.5c0 2.7-2.2 4.9-4.9 4.9h-31.9v.7h31.9c3.1 0 5.6-2.5 5.6-5.6v-13.5h-.7zM330.1 211.8v13.8c0 2.7-2.2 4.9-4.9 4.9h-1.6v.7h1.6c3.1 0 5.6-2.5 5.6-5.6v-13.8h-.7z" />
    <g fill="#FFF">
      <path d="M242.1 264.5v-20.8c0-2.7 2.2-4.9 4.9-4.9h14.6v-.7H247c-3.1 0-5.6 2.5-5.6 5.6v20.8h.7zM209.5 190.3v52.4c0 2.7-2.2 4.9-4.9 4.9h-51.8v.7h51.8c3.1 0 5.6-2.5 5.6-5.6v-52.4h-.7z" />
      <path d="M267.6 219.4v13.8c0 2.7-2.2 4.9-4.9 4.9H261v.7h1.6c3.1 0 5.6-2.5 5.6-5.6v-13.8h-.6zM237.4 195.2v-6.8c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7z" />
      <path d="M267.6 221.8V215c0-2.7-2.2-4.9-4.9-4.9h-9.3v-.7h9.3c3.1 0 5.6 2.5 5.6 5.6v6.8h-.7zM253.3 209.4H243c-2.7 0-4.9-2.2-4.9-4.9v-9.3h-.7v9.3c0 3.1 2.5 5.6 5.6 5.6h10.3v-.7zM210.2 195.2v-6.8c0-2.7 2.2-4.9 4.9-4.9H228v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v6.8h.7zM144.3 260v-6.8c0-2.7 2.2-4.9 4.9-4.9h12.9v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v6.8h.7z"
      />
    </g>
    <path fill="#FFF" d="M252.7 206.3v-44.4c0-2.7 2.2-4.9 4.9-4.9h12.9v-.7h-12.9c-3.1 0-5.6 2.5-5.6 5.6v44.4h.7zM318.6 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z"
    />
    <path fill="#FFF" d="M312.6 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.2 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-1.9-4.4-4.4-4.4z" />
    <path fill="#FFF" d="M306.7 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" />
    <path fill="#FFF" d="M300.8 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" />
    <path fill="#FFF" d="M294.9 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" />
    <path fill="#FFF" d="M288.9 235.6c-2.8 0-5.1-2.3-5.1-5.1s2.3-5.1 5.1-5.1 5.1 2.3 5.1 5.1-2.3 5.1-5.1 5.1zm0-9.5c-2.4 0-4.4 2-4.4 4.4 0 2.4 2 4.4 4.4 4.4 2.4 0 4.4-2 4.4-4.4 0-2.4-2-4.4-4.4-4.4z" />
    <path opacity=".1" fill="#111135" d="M258.4 213.6c2.3-3.3 1.5-7.9-1.7-10.2l-8.4 12c3.3 2.3 7.8 1.5 10.1-1.8z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M219.4 112.5c0 .9.7 1.7 1.7 1.7h25.3c.9 0 1.7-.7 1.7-1.7 0-.9-.7-1.7-1.7-1.7h-25.3c-.9.1-1.7.8-1.7 1.7z" />
    <path id="light" fill-rule="evenodd" clip-rule="evenodd" fill="#E8E4E5" d="M205.1 203c0-8.4-6.9-15.2-15.3-15.2s-15.2 6.8-15.2 15.2c0 5.9 3.3 11 8.3 13.5v7c0 3.9 3.1 7 7 7s7-3.1 7-7v-7c5.1-2.5 8.2-7.6 8.2-13.5z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M182.8 223.1v4.6c0 3.9 3.1 7 7 7s7-3.1 7-7v-4.6h-14z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M182.8 201.8h14v2.3h-14z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M188.7 196h2.3v14h-2.3z" />
    <path opacity=".1" fill-rule="evenodd" clip-rule="evenodd" fill="#111135" d="M193 188.1c-6.9 1.5-12 7.6-12 14.9 0 5.9 3.3 11 8.2 13.5v11.2c0 2.7 1.6 5.1 3.8 6.2 2.3-1.2 3.8-3.5 3.8-6.2v-11.2c4.9-2.5 8.2-7.6 8.2-13.5 0-7.3-5.1-13.4-12-14.9z" />
    <path fill-rule="evenodd" clip-rule="evenodd" fill="#4E3440" d="M297.3 218.1c0 .7-.5 1.2-1.2 1.2h-73.7c-.7 0-1.2-.5-1.2-1.2s.5-1.2 1.2-1.2h73.7c.7 0 1.2.5 1.2 1.2z" />
    <path fill="#E4311B" d="M299.8 216.1c-12.7 0-23-10.3-23-23s10.3-23 23-23 23 10.3 23 23-10.3 23-23 23zm0-42.9c-11 0-20 9-20 20s9 20 20 20 20-9 20-20-8.9-20-20-20z" />
    <path id="needle3" fill="#4E3440" d="M301.9 192.1c1 1.2.9 3-.3 4s-3 .9-4-.3-6.3-11.7-6.3-11.7 9.6 6.8 10.6 8z" />
    <path fill="#4E3440" d="M299.4 176.1h1v2.4h-1zM297.8 178.6l-1 .2-.4-2.4 1-.1zM293.528 177.348l.94-.342.82 2.255-.94.343zM292.9 180.2l-.8.5-1.2-2.1.8-.4zM288.53 180.39l.764-.644 1.546 1.836-.765.644zM288.9 183.4l-.6.7-1.8-1.5.6-.7zM287.4 185.4l-.5.9-2.1-1.2.5-.9zM286.2 187.7l-.3.9-2.2-.8.3-.9zM285.5 190.2l-.2.9-2.3-.4.2-.9zM285.2 192.7v1h-2.4v-1zM285.3 195.3l.2.9-2.3.5-.2-1zM285.9 197.8l.4.9-2.3.8-.3-.9zM286.9 200.1l.5.9-2 1.2-.5-.9zM287.114 204.55l-.642-.768 1.84-1.54.642.767zM289.34 206.612l-.765-.646 1.55-1.832.764.646zM292.2 205.7l.8.5-1.2 2-.8-.5zM294.5 206.8l.9.4-.8 2.2-1-.3zM296.9 207.6l1 .2-.4 2.3-1-.2zM299.5 207.9h1v2.4h-1zM302 207.7l1-.1.4 2.3-1 .2zM304.5 207.2l.9-.4..........完整代码请登录后点击上方下载按钮下载查看