Tạo nút Gấu trúc-Panda giải trí trên web/blog

Tạo nút sản xuất Gấu trúc nhẩy múa trên web/blog vui nhộn giúp bạn thư giãn xả stret những lúc căng thẳng vọc vạch code hoặc mệt nhọc vì xào nấu bài vở chôm chỉa được.

Để cài đặt hiệu ứng panda nhẩy nhót trên web/blog bạn cần vào chỉnh sửa mẫu và dán lần lượt CSS, Javascript và HTML vào những vị trí cần thiết.

DEMO

Để thấy hiệu ứng bạn click chuột vào nút "Panda" và click bao nhiêu con cũng được, không hạn chế số

lượng, kín blog luôn. Muốn tắt thì F5. Cài đặt Panda Button bao gồm.

1. CSS:

@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');.cover{position:fixed;width:100%;height:100vh;top:0;left:0;z-index:999;pointer-events:none}
.panda_face.hide{opacity:0}
span{margin-left:12px}
.panda{position:absolute;height:45px;width:45px;overflow:hidden;transition:2s}
.panda_inner{height:100%}
.panda_inner svg{height:100%;width:auto}
button{width:180px;padding:10px 14px;display:flex;justify-content:center;align-items:center;border:solid #006400;border-width:2px 2px 7px;border-radius:10px;background-color:#008080;font-family:'Press Start 2P',cursive;font-size:15px;color:white;transition:0.3s;cursor:pointer;float:right}
button:hover{border-width:2px 2px 4px;margin-top:3px}
button:focus{outline:none;box-shadow:0 0 0 4px hotpink}
.panda_face{position:relative;height:25px;width:auto}
.panda_face{opacity:1}
.panda_face svg{height:100%;width:auto}
.panda_white{fill:white}
.blue{fill:#12b7e9}
.green{fill:rgb(43,163,113)}
.pink{fill:hotpink}
.brown{fill:rgb(126,80,62)}
.dark_brown{fill:rgb(53,34,27)}
button:hover .panda_face{animation:bop infinite 0.5s}
@keyframes bop{0%{top:0;transform:scale(1)}
50%{top:-5px;transform:scale(0.95,1.05)}
90%{transform:scale(1.1,0.9)}
100%{top:0;transform:scale(1)}
}
button.animate svg{animation:spin infinite linear 0.5s}
@keyframes spin{0%{transform:rotate(0)}
100%{transform:rotate(-720deg)}
}
@keyframes fadeout{0%{opacity:1}
90%{opacity:0}
100%{opacity:0;display:none}
}
button:hover .fade_in,.panda_face.fade_in{animation:fade_in forwards 0.5s}
@keyframes fade_in{0%{opacity:0}
100%{opacity:1}
}
button.animate{border-color:rgb(58,28,9);transform-origin:bottom right;animation:shake ease forwards 0.5s}
@keyframes shake{0%{transform-origin:bottom right;transform:translate(0,0) rotate(0deg)}
40%{transform:translate(5px,0) rotate(45deg)}
70%{transform-origin:bottom right;transform:translate(5px,0) rotate(45deg)}
85%{transform-origin:bottom left;transform:translate(0,0) rotate(-20deg)}
95%{transform:translate(0,0) rotate(0deg)}
100%{transform-origin:bottom right;transform:translate(0,0) rotate(0deg)}
}


2. Javascript.

Dán trong phần head hoặc body

<script>
  function init() {  
  const spriteSvg = color =>{  
    return `
      <svg x="0px" y="0px" width="100%" height="100%" viewBox="0 0 2117.1 177.4" >
  <path class="panda_white" d="M1893.1,133.9l-76.9,8.4l-4.8-3l-5.1,0v-5.1h-5.1v-15.3l20.4-14h50.9l20.6,14V133.9z M1785.9,88.3V73h5.1V62.8
    h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1l5.1,0l31.6-3.9l44.8,8.8l8.3,10.4v7.9l-71.4,36.2L1785.9,88.3z"/>
  <g>
    <path class="panda_white" d="M556.7,88.5l0-30.3h5.1v-5.1h5.1V42.9h5.1v-5.1h5.1v-5.1h10.2v-5l50.9,0v5l25.5,0v55.8L556.7,88.5z
        M656.9,102.8l11.9,6.4v10.1l-5.1,21.8l-20.4,3.7h-5.1v5.1h-40.7l-25.6-4.3l-5-21.2v-5.1l10.6-16.5H656.9z"/>
  </g>
  <path class="panda_white" d="M208.8,93.7V83.5h5.1V73.3h5.1l0-25.5l15.3,0h10.2v-5.1h35.6v5.1l25.5,0l0,15.3h5.1v10.2h5.1v15.3h-5.1v5.1
    l0,20.3l10.2,0v5.1h-5.1l-0.1,20.4h-30.5v5.1h-30.5v-5.1l-29.4,0l-6.3-10.2v-5.1h-5.1v-5.1h-5.1V114L208.8,93.7z"/>
  <g>
    <g>
      <path class="panda_white" d="M1172,48v-5.1h5.1 M1177.1,42.9h10.2V48h5.1v5.1h5.1v10.2h5.1v30.5l-15.3,30.6v10.2h-5.1v5.1l-12.8,10.2
        l-38.2,0v-5.1H1121v-5.1l51-91.7 M1135.8,49.6l11.5,44.2l-41.6,40.8h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V88.7
        L1135.8,49.6z"/>
    </g>
    <path class="${color}" d="M1202.6,88.7h5.1v5.1h5v5.1h5.1v15.3h-5.1v10.2h-10.1v5.1h-15.3v-5.1h-5.1v-15.3h5.1V98.9h5.1v-5.1h10.2
      L1202.6,88.7z M1177.1,58.2v-5.1h10.2v5.1h5.1v10.2h-10.2v-5.1h-5.1V58.2 M1177.1,139.7h5.1v10.2h-5.1v5.1h-15.3v-5.1h-5.1v-10.2
      H1177.1 M1121.1,37.8h10.1v-5.1h20.4v-5.1h15.3v5.1h5.1v56.1h-5.1V104h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-10.2v5.1
      h-20.3v-5.1h-5.1v-10.2h5.1v-5.1h5.1v-5.1h5.1v-5.1h5V104h5.1V93.8h5.1V58.2h-5.1v10.2h-5v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-20.4
      V78.6h5.1V68.4h5.1v-5.1h5.1v-5.1h5.1V48h10.2v-5.1h5.1v-5.1L1121.1,37.8"/>
  </g>
  <g>
    <path class="panda_white" d="M1514.2,139.5v5.1h-5v5.1h-25.5v-5.1h-5.1v-5h-5.1v-5.1h-5.1v-5.1h-5.1v-5.7l-20.4-35.1V73.3l15.3-25.5h5.1v-5
      h5.1v-5.1h10.2v-5.1h10.2v-5.1h10.2L1514.2,139.5z M1539.7,42.8h5.1v5.1h5.1V53h5.1v5.1l-20.4,63h-10.2l-15.8-32.8l-0.2-49
      l5.8-11.8h5.1v5.1h10.2v5.1h5.1v5.1L1539.7,42.8"/>
    <path class="${color}" d="M1458.2,129.3H1448v-5.1h-5.1v-5.1h-5.1V93.6h5.1v-5.1h15.3v5.1h5.1v30.6h-5.1L1458.2,129.3z M1458.2,63.1
      h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1V58h5.1v-5.1h5.1v-5h10.2V63.1z M1504.1,134.4v10.2h-15.3v-5.1h-5.1v-5.1h5.1v-5.1h10.2v5.1
      L1504.1,134.4z M1509.1,134.4v-5.1h-5v-5.1h-5.1V114h-5.1v-5.1h-5.1v-5.1h-5.1V93.6h-5.1V47.8h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5
      h15.2v61h5.1v10.2h5.1v10.2h5.1v5.1h5.1V83.4h5.1V68.2h5.1v-5.1h5.1V58h5.1v5.1h5.1v10.2h5.1V114h-5.1v10.2h-5.1v5.1h-10.2v5.1
      h-5.1v15.3h-25.5v-10.2h-5.1L1509.1,134.4"/>
  </g>
  <g>
    <path class="panda_white" d="M793.7,32.7v5.1h10.2l35.6,20.4v5.1h5.1v6.6l5.1,8.9l0,35.4h-5.1v10.2h-5.1v5.1h-5.1l-81.5-71.3v-5.1h-5.1
      V42.9h5.1v-5.1h5.1v-5.1L793.7,32.7z M821.3,126.8l2.9,12.9v5.1h-5.1v5.1h-10.2v5.1h-30.5v-6.3L747,98.6l3.4-14.1l20.6-2.8
      L821.3,126.8z"/>
    <path class="${color}" d="M844.6,68.3h10.2v5.1H865v15.3h-5.1v5.1h-5.1v5.1h-10.2L844.6,68.3L844.6,68.3z M839.5,47.9v10.2h-5.1v5.1
      h-15.3v-5.1H814V53h-5.1v-5.1h-5.1V32.6h5.1v-5.1h15.3v5.1h10.2v5.1h5.1V47.9 M763.1,42.8h5.1v-5.1h10.2v10.2h-5.1V53H758v-5.1h5.1
      V42.8z M752.9,53v5.1h25.5v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1H814v5.1h5.1v5.1h5.1v5.1h5.1V109h5.1v25.5h-5.1v5.1h-10.2v-5.1
      H814v-5.1h-5.1v-5.1h-5.1v-5.1h-5v-5.1h-5.1v-5h-5.1V104h-5.1v-5.1h-15.3v-5.1H758v-5.1h-5.1v10.2h5.1v5.1h5.1v5h5.1v10.2h5.1v10.2
      h5.1v20.4h-15.3v-5.1H758v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-10.1h-5.1V78.5h5.1v-5.1h-5.1V58.1h5.1V53H752.9z"/>
  </g>
  <path class="${color}" d="M577.1,129.5v5.1h10.2v5.1h10.2V155h-5.1v5.1h-15.3V155H572v-5.1h-5.1v-10.2h-5.1v-10.2h5.1v-5.1h5.1v5.1H577.1
    z M582.2,58.2h5.1v-5.1h5.1V48h5.1v5.1h5.1v5.1v5.1v5.1h-5.1v5.1h-15.3L582.2,58.2L582.2,58.2z M597.5,17.5h5.1v-5.1h20.3v5.1h10.2
    v20.3H628l0,0v5.1h-15.3v-5.1h-5.1v-5h-5v-5.1h-5.1L597.5,17.5L597.5,17.5z M663.7,155h-5.1v5.1h-10.2V155h-5.1v-15.3h10.2v-5.1h5.1
    v-5.1h5.1v-10.2h5.1v25.5h-5.1V155z M658.6,53.1V42.9h-5.1V32.7h5.1v-5h10.2v5h5.1V48h-5.1l0,0v5.1H658.6z M668.8,109.2h-51v5.1
    h-40.7v5h-10.2v-15.2h-5.1V99h-5.1v-5.1h-5.1v-5.1h-5.1V78.6h5.1v-5.1h15.3v5.1h15.3v5.1h50.9v-5.1h25.5v-5.1h5.1v-5.1h25.5v20.4
    h-5.1v5.1H679V99h-10.2l0,0V109.2z"/>
  <g>
    <polyline class="${color}" points="1962.2,83.6 1962.2,78.5 1962.2,73.4 1967.3,73.4 1967.3,73.4 1967.3,73.4 1967.3,68.3 1967.3,63.2 
      1972.4,63.2 1972.4,63.2 1972.4,63.2 1972.4,58.1 1972.4,53 1977.5,53 1977.5,53.1 1977.5,53 1977.5,48 1982.6,48 1982.6,48 
      1982.6,48 1982.6,42.9 1987.7,42.9 1987.7,37.8 1992.8,37.8 1992.8,37.8 1997.8,37.8 1997.9,37.8 1997.8,37.8 1997.8,32.7 
      2002.9,32.7 2008,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,32.7 2013.1,27.6 2018.2,27.6 2023.3,27.6 
      2023.3,27.6 2028.4,27.6 2033.5,27.6 2038.6,27.6 2038.6,27.6 2043.7,27.6 2048.8,27.6 2048.8,32.7 2048.8,32.7 2048.8,32.7 
      2053.9,32.7 2059,32.7 2059,37.8 2064.1,37.8 2064.1,37.8 2069.2,37.8 2069.2,42.9 2074.3,42.9 2074.3,48 2074.3,48 2079.4,48 
      2079.4,53 2079.4,53.1 2079.4,58.1 2079.3,58.1 2079.4,58.1 2084.4,58.1 2084.4,63.2 2084.4,63.2 2084.4,63.2 2089.5,63.2 
      2089.5,68.3 2089.5,73.4 2094.6,73.4 2094.6,78.5 2094.6,83.6 2094.6,88.7 2094.6,88.7 2094.6,93.8 2094.6,98.9 2094.6,104 
      2094.6,109.1 2089.5,109.1 2089.5,114.2 2089.5,114.2 2089.5,119.3 2084.4,119.3 2084.4,124.4 2084.4,129.5 2079.4,129.5 
      2079.4,129.4 2079.4,129.5 2079.3,129.5 2079.4,129.5 2079.4,134.5 2074.3,134.5 2074.3,134.5 2074.3,139.6 2069.2,139.6 
      2069.2,144.7 2064.1,144.7 2064.1,144.7 2059,144.7 2059,149.8 2053.9,149.8 2048.8,149.8 2048.8,154.9 2043.7,154.9 2038.6,154.9 
      2038.6,154.9 2033.5,154.9 2028.4,154.9 2023.3,154.9 2023.3,154.9 2018.2,154.9 2013.1,154.9 2013.1,154.9 2008,154.9 2008,149.8 
      2002.9,149.8 1997.9,149.8 1997.8,149.8 1992.8,149.8 1992.8,144.7 1992.8,144.7 1992.8,144.7 1987.7,144.7 1987.7,139.6 
      1982.6,139.6 1982.6,139.6 1977.5,139.6 1977.5,134.5 1977.5,129.5 1977.5,129.4 1977.5,129.5 1972.4,129.5 1972.4,124.4 
      1972.4,119.3 1967.3,119.3 1967.3,114.2 1967.3,114.2 1967.3,109.1 1967.3,104 1967.3,104 1967.3,104 1962.2,104 1962.2,98.9 
      1962.2,93.8 1962.2,88.7 1962.2,88.7 1962.2,83.6 	"/>
  </g>
  <path class="${color}" d="M1811.4,144.5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h50.9V119h-5.1v-5.1h-10.2v-5.1h-50.9v5.1h-10.2v5.1h-10.2v5.1
    h-5.1V119h-5.1v-15.3h-5.1V88.5h5.1v-5.1h10.2v-5.1h5.1v-5.1h10.2v-5.1h5.1V63h10.2v-5.1h45.8V63h20.4v-5.1h-5.1v-5.1h-10.2v-5.1
    h-45.8v-5.1h-20.4v-5.1h5.1v-5.1h15.3v-5.1h35.6v5.1h10.2v5.1h10.2v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1v10.2h5.1v10.2h5.1v30.5h-5.1
    v5.1h-5.1v10.2h-5.1v10.2H1898v5.1h-5.1v5.1h-10.2v5.1h-10.2v5.1h-40.7v-5.1h-15.3v-5.1H1811.4z"/>
  <g>
    <path class="panda_white" d="M929.4,134.7h-5.1v-5.1h-5.1v-5.1h5.1l0.4-42l20.8-32.7L962.7,89l0.6,50.4L960,155h-5.1v-5.1h-10.2v-5.1h-5.1
      v-5h-10.2V134.7 M1010.9,139.8h-5.1v5h-10.2v5.1h-10.2v5.1h-10.2v-5.1h5.1l-19.6-90.7L960,43v-5.1h5v-5.1h5.1v-5.1h15.3v5.1h5.1
      v5.1h5.1V43h5.1v5.1h5.1v5.1h5.1v9.1l15.1,0.6v31.1h5.3v15.3h-5.1v5.1h-5.1v5.1h-5.1v15.3h-5.1L1010.9,139.8z"/>
    <path class="${color}" d="M985.4,53.2h-10.2v-5.1h-5.1V37.9h15.3V43h5.1v5.1h-5.1V53.2z M985.4,144.8h-5.1v5.1h-5.1v5.1H960V93.9h-5.1
      V83.7h-5.1V73.5h-5.1v-5.1h-5.1V99h-5.1v15.3h-5.1v5.1h-5.1v5.1h-5.1v-5.1h-5.1v-10.2H909V68.4h5.1V58.2h5.1v-5h10.2v-5.1h5.1V32.8
      h5.1v-5.1h15.3v5.1h5.1V43h5.1v10.2h5v5h5.1v10.2h5.1v5.1h5.1v5.1h5.1v10.2h5.1v45.9h-5.1v5h-5.1L985.4,144.8z M1036.4,124.5h-5.1
      v5.1h-5.1v5.1H1016v-5.1h-5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v-5.1h5.1v5.1h5.1L1036.4,124.5L1036.4,124.5z M1036.4,88.8h-5.1v5.1H1016
      v-5.1h-5.1V58.2h5.1v-5h10.2v5h5.1v5.1h5.1L1036.4,88.8L1036.4,88.8z"/>
  </g>
  <g>
    <path class="panda_white" d="M149.5,68.2V58h-5.1V47.8l-4.6-20.5l-20.9,0.1v-5.1h-10.2v-5.1H73.1v5.1H62.9l-16.6,5.1l-3.9,5l0.1,20.5h-5.1
      l0,33H27.3l-0.1,34.9h20.4v13.8l25.5-0.2v5.1l65.7,0l0.3-15.3h5.3v-5.1h5.1v-10.2L149.5,68.2z"/>
    <path class="${color}" d="M98.7,63.1H88.5V58h10.2V63.1z M103.8,73.3H83.4v-5.1h-5.1v-5.1h5.1v5.1h20.4V73.3z M124.1,42.7v5.1h5.1v5.1
      h5.1v10.2H119V58h-5.1V42.7H124.1z M149.6,42.7h-5.1v5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V22.3h5.1v-5.1h10.2v5.1h5.1v5.1h5.1
      L149.6,42.7L149.6,42.7z M103.8,134.4H119v-5.1h10.2v-5.1h10.2v30.6h-5.1v5H119v-5h-5.1v-5.1h-5.1v-5.1h-5V134.4z M68.1,42.7h5.1
      V58h-5.1v5.1H57.9V58h-5.1V47.8h5.1v-5.1H68.1 M52.8,17.2h5.1v5.1H63v5.1h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1 M42.6,42.7h-5.1V27.4
      h5.1v-5.1h5.1v-5.1h5.1 M22.3,139.5h-5.1v-20.4h5.1V114h5v-5.1h20.4v5.1h5.1v5.1h5.1v5.1H63v10.2h-5.1v5.1h-5.1v5.1H42.6v5.1H32.4
      v-5.1H22.3V139.5z M52.8,78.3h5.1v5.1h66.2v-5.1h15.3v-5.1h5.1v-5h5.1v10.1h15.3v5.1h5.1v15.3h-5.1v5.1h-5.1v5.1h-15.3v-5.1h-10.2
      v-5.1h-10.2v-5.1H52.8v5.1H27.3v-5.1h-5V83.4h-5.1v-5.1h-5.1v-5H7V52.9h5.1v-5.1h10.2v5.1h5.1V58h5v5.1h5.1v5.1h5.1v5h5.1v5.1
      L52.8,78.3"/>
  </g>
  <path class="${color}" d="M285.3,42.7h5.1v-5.1h15.3v5.1h5.1v5.1h5.1V58h-5.1v5.1h-5.1V58h-5.1v-5.1h-5.1v-5.1h-10.2L285.3,42.7
    L285.3,42.7z M280.2,68.2h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-10.2v-5.1h-5.1V68.2z M259.8,73.3H270v5.1h-10.2V73.3z M254.8,83.5
    h20.3v5.1h-20.3V83.5z M244.6,68.2v10.2h-5.1v5.1h-15.3V73.3h5.1v-5.1h5.1v-5.1h5.1v5.1L244.6,68.2z M208.9,47.8h5.1v-5.1h15.3v5.1
    h5.1v5.1h-5.1V58h-5.1v5.1h-5.1v5.1H214v-5.1h-5.1V47.8z M239.5,154.8v5.1h-15.3v-5.1h-5.1v-25.5h15.3v5.1h10.2v5.1h5.1v10.2h-5.1
    v5.1L239.5,154.8z M321,144.6v5.1h-5.1v5.1h-15.3v-5.1h-5.1v-5.1h-5.1v-10.2h10.2v-5.1h10.2v-5.1h5.1v-5.1h10.2v25.5H321z
      M341.4,98.8h-5.1v5h-5.1v5.1h-5.1v5.1h-25.5v-5.1h-61.1v5.1h-45.9v-5.1h-5.1V93.7h5.1v-5.1h15.3v5.1h101.9v-5.1h5.1v-5.1h5.1v-5.1
    h10.2v5.1h5.1v5.1h5.1L341.4,98.8L341.4,98.8z"/>
  <g>
    <path class="panda_white" d="M380.1,108.9v10.2h5.1v5.1h5.3l0.3,15.3l65.7,0v-5.1l25.5,0.2v-13.8h20.4l-0.1-34.9h-10.1l0-33h-5.1l0.1-20.5
      l-3.9-5l-16.6-5.1h-10.2v-5.1h-35.6v5.1h-10.2v5.1l-20.9-0.1l-4.6,20.5V58h-5.1v10.2L380.1,108.9z"/>
    <path class="${color}" d="M430.9,58h10.2v5.1h-10.2V58z M425.8,68.2h20.4v-5.1h5.1v5.1h-5.1v5.1h-20.4V68.2z M415.7,42.7V58h-5.1v5.1
      h-15.3V52.9h5.1v-5.1h5.1v-5.1H415.7z M380,42.7V27.4h5.1v-5.1h5.1v-5.1h10.2v5.1h5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v5.1h-5.1v-5.1
      H380L380,42.7z M425.8,144.6h-5v5.1h-5.1v5.1h-5.1v5h-15.3v-5h-5.1v-30.6h10.2v5.1h10.2v5.1h15.2V144.6z M461.5,42.7h10.2v5.1h5.1
      V58h-5.1v5.1h-10.2V58h-5.1V42.7H461.5 M487,42.7h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h5.1v-5.1h5.1 M476.8,17.2h5.1v5.1h5.1
      v5.1h5.1v15.3H487 M507.3,144.6h-10.1v5.1H487v-5.1h-10.2v-5.1h-5.1v-5.1h-5.1v-10.2h5.1v-5.1h5.1V114h5.1v-5.1h20.4v5.1h5v5.1h5.1
      v20.4h-5.1V144.6z M476.8,78.3h5.1v-5.1h5.1v-5h5.1v-5.1h5.1V58h5v-5.1h5.1v-5.1h10.2v5.1h5.1v20.4h-5.1v5h-5.1v5.1h-5.1v10.2h-5
      v5.1h-25.5v-5.1h-71.3v5.1h-10.2v5.1h-10.2v5.1h-15.3v-5.1h-5.1v-5.1h-5.1V83.4h5.1v-5.1H380V68.2h5.1v5h5.1v5.1h15.3v5.1h66.2
      v-5.1L476.8,78.3"/>
  </g>
  <g>
    <path class="panda_white" d="M1295.2,60.5l-2.9-12.9v-5.1h5.1v-5.1h10.2v-5.1h30.5v6.3l31.4,50.1l-3.4,14.1l-20.6,2.8L1295.2,60.5z
        M1322.8,154.6v-5.1h-10.2l-35.6-20.4V124h-5.1v-5.8l-5.1-13l0-32.2h5.1V62.9h5.1v-5.1h5.1l81.5,71.3v5.1h5.1v10.2h-5.1v5.1h-5.1
      v5.1H1322.8z"/>
    <path class="${color}" d="M1271.9,119h-10.2v-5.1h-10.2V98.6h5.1v-5.1h5.1v-5.1h10.2V119L1271.9,119z M1277,139.4v-10.2h5.1v-5.1h15.3
      v5.1h5.1v5.1h5.1v5.1h5.1v15.3h-5.1v5.1h-15.3v-5.1h-10.2v-5.1h-5.1V139.4 M1353.4,144.5h-5.1v5.1h-10.2v-10.2h5.1v-5.1h15.3v5.1
      h-5.1V144.5z M1363.6,134.3v-5.1h-25.5v-5.1h-10.2V119h-5.1v-5.1h-5.1v-5.1h-5.1v-5.1h-10.1v-5.1h-5.1v-5.1h-5.1v-5.1h-5.1V78.3
      h-5.1V52.8h5.1v-5.1h10.2v5.1h5.1v5.1h5.1V63h5.1v5.1h5v5.1h5.1v5h5.1v5.1h5.1v5.1h15.3v5.1h10.2v5.1h5.1V88.4h-5.1v-5.1h-5.1v-5
      h-5.1V68.1h-5.1V57.9h-5.1V37.5h15.3v5.1h5.1v5.1h5.1v5.1h5.1v5.1h5.1V63h5.1v5.1h5.1v10.1h5.1v30.6h-5.1v5.1h5.1v15.3h-5.1v5.1
      H1363.6z"/>
  </g>
  <g>
    <g>
      <path class="panda_white" d="M1650.3,139.3v5.1h-5.1 M1645.2,144.4H1635v-5.1h-5.1v-5.1h-5.1V124h-5.1V93.5l15.3-30.6V52.7h5.1v-5.1
        l12.8-10.2l38.2,0v5.1h10.2v5.1l-51,91.7 M1686.5,137.7L1675,93.5l41.6-40.8h5.1v5.1h5.1v5.1h5.1V68h5.1v5.1h5.1v25.5
        L1686.5,137.7z"/>
    </g>
    <path class="${color}" d="M1619.7,98.6h-5.1v-5.1h-5v-5.1h-5.1V73.1h5.1V62.9h10.1v-5.1h15.3v5.1h5.1v15.3h-5.1v10.2h-5.1v5.1h-10.2
      L1619.7,98.6z M1645.2,129.1v5.1H1635v-5.1h-5.1v-10.2h10.2v5.1h5.1V129.1 M1645.2,47.6h-5.1V37.4h5.1v-5.1h15.3v5.1h5.1v10.2
      H1645.2 M1701.2,149.5h-10.1v5.1h-20.4v5.1h-15.3v-5.1h-5.1V98.5h5.1V83.3h5.1V73.1h5.1V68h5.1v-5.1h5.1v-5.1h5.1v-5.1h10.2v-5.1
      h20.3v5.1h5.1v10.2h-5.1V68h-5.1v5.1h-5.1v5.1h-5v5.1h-5.1v10.2h-5.1v35.6h5.1v-10.2h5v-5.1h5.1v-5.1h10.2v-5.1h10.2v-5.1h20.4
      v10.2h-5.1v10.2h-5.1v5.1h-5.1v5.1h-5.1v10.2h-10.2v5.1h-5.1v5.1H1701.2"/>
  </g>
  </svg>    `
  }
  const colorVariations = [
    'blue',
    'green',
    'pink',
    'brown',
    'dark_brown'
  ]
  const animationPattern = [ 
    11,11,11,11,10,
    9,8,7,6,5,4,
    9,8,7,6,5,4,
    3,2,1,0
  ]
  const frameSize = 45
  //rolling animation
  const animateSprite = (target, speed) => {
    let i = 0
    target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
    setInterval(function () {
      target.style.margin = `0px 0px 0px -${(animationPattern[i] * frameSize)}px`
      if (animationPattern[i] === 0) {
        i -= 2
      } else {
        i++
      }
    }, speed)
  } 
  const pandaFace = document.querySelector('.panda_face')
  const button = document.querySelector('button')
  const cover = document.querySelector('.cover')
  const pandaIcon = document.querySelectorAll('.panda_icon')
  let pandaPos = pandaFace.getBoundingClientRect()
  let pandaColor = pandaIcon[1].classList[1]
  let pandaSwitch = true
  const movePanda = target =>{
    target.style.transition = '10s'
    const randomTop = Math.ceil(Math.random() * 100)
    target.style.zIndex = randomTop
    target.style.top = `${randomTop}%`
    target.style.left = `${Math.ceil(Math.random() * 100)}%`
  }
  const animateButton = () =>{
    pandaColor = pandaIcon[1].classList[1]
    button.classList.add('animate')
    pandaIcon.forEach(ele=>ele.classList.add(pandaColor))
    pandaFace.classList.remove('fade_in')
  }
  const completeButtonAnimation = () =>{
    button.classList.remove('animate')
    pandaFace.classList.remove('hide')
    pandaFace.classList.add('fade_in')
    pandaIcon[1].classList.add(colorVariations[Math.floor(Math.random() * colorVariations.length)])
    pandaSwitch = true
  }
  const createAndAnimatePanda = () =>{
    const panda = document.createElement('div')
    panda.classList.add('panda')
    panda.style.top = `${pandaPos.y - 10}px`
    panda.style.left = `${pandaPos.x - 10}px`
    cover.appendChild(panda)
    const inner = document.createElement('div')
    inner.classList.add('panda_inner')
    inner.style.width = `${frameSize * 12}px`
    inner.innerHTML = spriteSvg(pandaColor)
    panda.appendChild(inner)
    animateSprite(inner, 110)
    pandaFace.classList.add('hide')
    setTimeout(()=>{
      panda.style.left = `${pandaPos.x > 300 ? pandaPos.x - 300 : 50}px`
      pandaIcon.forEach(ele=>ele.classList.remove(pandaColor))
    }, 40)
    setTimeout(()=>{
      movePanda(panda)
      setInterval(()=>{
        movePanda(panda)
      },4000)
    }, 2000)
  }
  const triggerPanda = ()=>{  
    if (!pandaSwitch) return   
    pandaSwitch = false
    animateButton()
    setTimeout(()=>{
      createAndAnimatePanda()
      setTimeout(()=>{
        completeButtonAnimation()
      },1200)  
    },560)
  }
  button.addEventListener('click', triggerPanda)
  window.addEventListener('resize', ()=>pandaPos = pandaFace.getBoundingClientRect())
}
window.addEventListener('DOMContentLoaded', init)
</script>


3. HTML.

Dán HTML vào chỗ mà bạn cần đổ gấu ra

<button>
      <div class='panda_face'>
        <svg height='100%' viewBox='0 0 91.7 71.3' width='100%' x='0px' y='0px'>
          <path class='panda_icon panda_white' d='M86.6,20.4v15.3h5.1v20.4h-5.1v5.1h-5.1v5H71.3v5.1H20.4v-5.1H10.2v-5H5.1v-5.1H0V35.7h5.1V20.4L25.5,5.1h40.7L86.6,20.4z'/>
          <path class='panda_icon pink' d='M40.7,45.8h10.2v5.1H40.7V45.8z M10.2,25.4H5.1v-5.1H0V10.2h5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h-5.1v5.1h-5.1v5h-5.1V25.4z             M30.5,45.8h-5v5.1H15.3V35.6h5.1v-5.1h10.1V45.8z M61.1,56H56v5.1H35.6V56H56v-5.1h5.1V56z M76.4,50.9H66.2v-5.1h-5.1V30.5h10.2           v5.1h5.1V50.9z M91.7,20.3h-5.1v5.1h-5.1v-5.1h-5.1v-5h-5.1v-5.1h-5.1V5.1h5.1V0h10.2v5.1h5.1v5.1h5.1V20.3z'/>
        </svg>
      </div>
      <span>panda!</span>
    </button>
          <div class='cover'/>
          <div style='clear: both'/>


ST

Ads in post custom1