Ядроид )

Ядроид / Yadroid

by Axelvaisper

HTML

<div class="right light"></div>
<div class="left light"></div>
<div class="droid">
  <div class="head">
    <div class="ears">
      <div class="right ear"></div>
      <div class="left ear"></div>
    </div>
    <div class="eyes">
      <div class="right eye"></div>
      <div class="left eye"></div>
    </div>
  </div>
  <div class="body">
    <div class="right arm"></div>
    <div class="left arm"></div>
    <div class="trunk">
      <div class="tasuki">Ядроид</div>
    </div>
  </div>
  <div class="foot">
    <div class="right leg"></div>
    <div class="left leg"></div>
  </div>
</div>

CSS

body {
	overflow: hidden;
}

div {
	-webkit-animation-duration: 2s;
	-moz-animation-duration: 2s;
	animation-duration: 2s;

	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	-ms-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
}

.left {
	float: right;
}

.right {
	float: left;
}

.droid {
	padding: 40px;

	-webkit-animation-name: kf_droid1, kf_droid2, kf_droid3;
	-moz-animation-name: kf_droid1, kf_droid2, kf_droid3;
	-ms-animation-name: kf_droid1, kf_droid2, kf_droid3;
	animation-name: kf_droid1, kf_droid2, kf_droid3;
}

.head {
	width: 200px;
	height: 90px;

	-webkit-border-radius: 100px 100px 0 0;
	-moz-border-radius: 100px 100px 0 0;
	border-radius: 100px 100px 0 0;
	margin: auto;
	background: #9c4;
}

.ears {
	width: 150px;
	margin: auto;
}

.ear {
	width: 8px;
	height: 60px;

	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	background: #9c4;
	margin-top: -20px;
}

.left.ear {
	-webkit-transform: rotate(30deg);
	-moz-transform: rotate(30deg);
	-o-transform: rotate(30deg);
	-ms-transform: rotate(30deg);
	transform: rotate(30deg);
}

.right.ear {
	-webkit-transform: rotate(-30deg);
	-moz-transform: rotate(-30deg);
	-o-transform: rotate(-30deg);
	-ms-transform: rotate(-30deg);
	transform: rotate(-30deg);
}

.eyes {
	width: 120px;
	margin: auto;
}

.eye {
	width: 20px;
	height: 20px;

	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background: #fff;
	margin-top: 40px;
}

.body {
	width: 290px;
	margin: 0 auto -50px auto;
}

.arm {
	width: 40px;
	height: 120px;
	background: #9c4;

	-webkit-border-radius: 20px 20px 20px 20px;
	-moz-border-radius: 20px 20px 20px 20px;
	border-radius: 20px 20px 20px 20px;

	-webkit-animation-name: kf_arm1;
	-moz-animation-name: kf_arm1;
	-ms-animation-name: kf_arm1;
	animation-name: kf_arm1;
}

.trunk {
	width: 200px;
	height: 170px;
	background: #9c4;

	-webkit-border-radius: 0 0 20px...