JSFiddle - React, Tailwind, and code Playground

by Dobriac

HTML

<!-- Кошачья анатомия -->

<div id="ani_box"><input id="ani" type="checkbox"> <label for="ani">Остановить кота</label></div>
<div id="kot_body"></div>
<div id="kot_head"></div>
<div id="kot_rraw"></div>
<div id="kot_lraw"></div>
<div id="kot_hvost"></div>
<div id="plata">
  <h1>Анимация Радиокота</h1>
  <p>Периодически заглядывал на сайт. Впечатление уюта от кота понравилось. В свободное время решил небольшой вклад сделать в это дело. <img src="//radiokot.ru/forum/images/medals/miskoi_po_avatare.gif" alt="Хотел миской по аватаре" title="Медаль герою"></p>
  <p>Оцените пластику лап и грацию хвоста. Жмите "Остановить кота" чтобы сравнить впечатления.</p>
  <p>Интересуюсь вашим мнением.</p>
  <div id="disqus_thread"></div>
</div>
<script id="dsq-count-scr" src="//dobriac.disqus.com/count.js" async></script>

CSS

/* Макет Радиокота */

body {
  background-color: #dfa;
}

#kot_body {
  background: url("//radiokot.ru/templates/radiokot_classic_neew/images/kot_body.png") no-repeat;
  width: 118px;
  height: 140px;
  position: absolute;
  left: 45px;
  top: 82px;
  z-index: 10;
}

#kot_head {
  background: url("//radiokot.ru/templates/radiokot_classic_neew/images/head.png") no-repeat;
  width: 213px;
  height: 161px;
  position: absolute;
  left: 2px;
  top: -4px;
  z-index: 30;
}

#kot_rraw {
  background: url("//radiokot.ru/templates/radiokot_classic_neew/images/rightraw.png") no-repeat;
  width: 35px;
  height: 53px;
  position: absolute;
  left: 17px;
  top: 160px;
  z-index: 30;
}

#kot_lraw {
  background: url("//radiokot.ru/templates/radiokot_classic_neew/images/leftraw.png") no-repeat;
  width: 53px;
  height: 35px;
  position: absolute;
  left: 145px;
  top: 129px;
  z-index: 40;
}

#kot_hvost {
  background: url("//radiokot.ru/templates/radiokot_classic_neew/images/hvost.png") no-repeat;
  width: 151px;
  height: 98px;
  position: absolute;
  left: 185px;
  top: 85px;
  z-index: 20;
}

#plata {
  min-height: 90%;
  padding: 77px 15% 10%;
  position: absolute;
  left: 41px;
  right: 39px;
  top: 154px;
  z-index: 16;
  background-color: #ea5;
  box-shadow:inset 7px 7px 40px #c84;
}

#ani_box {
  position: absolute;
  width: auto;
  padding: 9px;
  
  top: 27px;
  left: 199px;
  background-color: #dd7;
  box-shadow: inset 1px 1px 7px #cb6;
}

/* Далее анимационная добавка */

#kot_head {
  will-change: transform;
  transform-origin: 45% 85%;
  animation: kot_head 30s infinite;
}

@keyframes kot_head {
  63% {
    transform: rotate(0deg);
  }

  65% {
    transform: rotate(-7deg);
  }

  75% {
    transform: rotate(-7deg);
  }

  85% {
    transform: rotate(7deg);
  }

  95% {
    transform: rotate(7deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

#kot_rraw {
  will-change: transform;
  transform-origin: 85% 0;
  animation: kot_rraw 20s infinite;
}

@keyframes...

JavaScript

document.getElementById("ani").addEventListener('change', function() {
  document.getElementById('kot_head').classList.toggle('deadcat');
  document.getElementById('kot_rraw').classList.toggle('deadcat');
  document.getElementById('kot_lraw').classList.toggle('deadcat');
  document.getElementById('kot_hvost').classList.toggle('deadcat');
});

var disqus_config = function () {
this.page.url = 'https://jsfiddle.net/Dobriac/heL60cbg/';
this.page.identifier = 'vote2cote';
};
(function() {
var d = document, s = d.createElement('script');
s.src = 'https://dobriac.disqus.com/embed.js';
s.setAttribute('data-timestamp', +new Date());
(d.head || d.body).appendChild(s);
})();