CSSでアンパンマンを描いてみた

息子がアンパンマンが好きだったので描いていたけど、途中でやめたファイルを見つけたので完成させてみました。
完全な自己満です。

See the Pen anpanman by Yayoi Oda (@marzo) on CodePen.

html

<div id="anpanman">
	<div id="anpan_body">
		<div id="anpan_cape">
			<div id="anpan_cape_inner_body"></div>
			<div id="anpan_cape_inner_0"></div>
			<div id="anpan_cape_inner_1"></div>
			<div id="anpan_cape_inner_2"></div>
			<div id="anpan_cape_inner_3"></div>
			<div id="anpan_cape_inner_4"></div>
			<div id="anpan_cape_inner_5"></div>
			<div id="anpan_cape_inner_6"></div>
			<div id="anpan_cape_inner_7"></div>
			<div id="anpan_cape_inner_8"></div>
			<div id="anpan_cape_inner_9"></div>
			<div id="anpan_cape_inner_10"></div>
			<div id="anpan_cape_inner_11"></div>
			<div id="anpan_cape_inner_12"></div>
		</div>
		<div id="anpan_arm_left"></div>
		<div id="anpan_arm_right"></div>
		<div id="anpan_hand_left"></div>
		<div id="anpan_hand_right"></div>
		<div id="anpan_face"></div>
		<div id="anpan_blow_left"></div>
		<div id="anpan_blow_right"></div>
		<div id="anpan_eye"></div>
		<div id="anpan_mouse"></div>
		<div id="anpan_cheek"></div>
		<div id="anpan_cheek_gloss"></div>
		<div id="anpan_body"></div>
		<div id="anpan_mant"></div>
	</div>
</div>

css

        body{
		background-color: aliceblue;
	}	
	#anpanman{
		position: absolute;
		top:25%;
		left: 25%;
	}
	#anpan_hand_left{
		width: 190px;
		height: 170px;
		background-color: #fd0;
		border-radius: 50%;
		position: absolute;
		top: 150px;
		left: -184px;
		transform: rotateZ(-49deg);
		box-shadow: 0 70px 0 -40px #fc0;
	}
	#anpan_hand_right{
		width: 190px;
		height: 170px;
		background-color: #fd0;
		border-radius: 50%;
		position: absolute;
		top: 150px;
		right: -605px;
    	transform: rotateZ(49deg);
		box-shadow: 0 70px 0 -40px #fc0;
	}	
	#anpan_arm_left{
		width: 0;
		height: 0;
		border: 140px solid transparent;
		border-bottom: 100px solid red;
		border-radius: 100%;
		position: absolute;
		top: 130px;
		left: -100px;
		transform: rotateZ(10deg);
	}
	#anpan_arm_right{
		width: 0;
		height: 0;
		border: 140px solid transparent;
		border-bottom: 100px solid red;
		border-radius: 100%;
		position: absolute;
		top: 130px;
		right: -490px;
    	transform: rotateZ(-10deg);
	}
	#anpan_face{
		width: 420px;
		height: 390px;
		border-radius: 50%;
		background-color: #f95;
		box-shadow: 0 100px 0 -50px red;
		position: absolute;
		top: 0;
		left: 0;
	}
	#anpan_cheek{
		width: 150px;
		height: 140px;
		border-radius: 50%;
		background-color: #f21;
		position: absolute;
		top: 140px;
		left: 135px;
		box-shadow: -135px 0 0 -5px #f53,135px 0 0 -5px #f53;
	}
	#anpan_cheek_gloss{
		width: 30px;
		height: 30px;
		background-color: #fff;
		position: absolute;
		top: 185px;
		left: 200px;
		box-shadow: -135px 0 0 0 #fff,135px 0 0 0 #fff;
	}
	#anpan_eye{
		width: 35px;
		height: 50px;
		border-radius: 50%;
		background-color: #000;
		position: absolute;
		top: 105px;
		left: 130px;
		box-shadow: 130px 0 0 0 #000;
	}
	#anpan_blow_left{
		width: 85px;
		height: 120px;
		background-color: #f95;
		border-top:3px solid #000;
		border-radius: 50%;
		position: absolute;
		top: 65px;
		left: 100px;
	}
	#anpan_blow_right{
		width: 85px;
		height: 120px;
		background-color: #f95;
		border-top:3px solid #000;
		border-radius: 50%;
		position: absolute;
		top: 65px;
		left: 235px;
	}
	#anpan_mouse{
		width: 220px;
		height: 100px;
		background-color: #f95;
		border-bottom:3px solid #000;
		border-radius: 50%;
		position: absolute;
		top: 200px;
		left: 105px;
	}
	#anpan_cape_inner_0,
	#anpan_cape_inner_2,
	#anpan_cape_inner_4,
	#anpan_cape_inner_6,
	#anpan_cape_inner_8,
	#anpan_cape_inner_10,
	#anpan_cape_inner_12
	{
		position: absolute;
		width: 60px;
		height: 60px;
	}
	#anpan_cape_inner_1,
	#anpan_cape_inner_3,
	#anpan_cape_inner_5,
	#anpan_cape_inner_7,
	#anpan_cape_inner_9,
	#anpan_cape_inner_11
	{
		position: absolute;
		width: 60px;
		height: 60px;
	}
	#anpan_cape_inner_0,
	#anpan_cape_inner_2,
	#anpan_cape_inner_4,
	#anpan_cape_inner_6,
	#anpan_cape_inner_8,
	#anpan_cape_inner_10,
	#anpan_cape_inner_12
	{
		border-radius: 100px;
		/* animation: cape1 ease infinite alternate; */
		background-color:  aliceblue;
	}
	#anpan_cape_inner_1,
	#anpan_cape_inner_3,
	#anpan_cape_inner_5,
	#anpan_cape_inner_7,
	#anpan_cape_inner_9,
	#anpan_cape_inner_11	{
		border-radius: 100px;
		/* animation: cape2 1s ease infinite alternate; */
		background-color: #2e2326;	
	}
	#anpan_cape_inner_0{
		top: 45px;
    	left: -110px;
	}
	#anpan_cape_inner_1 {
    top: 60px;
    left: -52px;
}
#anpan_cape_inner_2 {
    top: 45px;
    left: 6px;
}
#anpan_cape_inner_3 {
    top: 60px;
    left: 64px;
}
#anpan_cape_inner_4 {
    top: 45px;
    left: 122px;
}
#anpan_cape_inner_5 {
    top: 60px;
    left: 180px;
}
#anpan_cape_inner_6 {
    top: 45px;
    left: 238px;
}
#anpan_cape_inner_7 {
    top: 60px;
    left: 296px;
}
#anpan_cape_inner_8 {
    top: 45px;
    left: 354px;
}
#anpan_cape_inner_9 {
    top: 60px;
    left: 412px;
}
#anpan_cape_inner_10 {
    top: 45px;
    left: 470px;
}
#anpan_cape_inner_11 {
    top: 60px;
    left: 528px;
}
#anpan_cape_inner_12 {
    top: 45px;
    left: 586px;
}
#anpan_cape_inner_0
{
	border-radius:0 100px 100px 0;
}

@keyframes horizontal {
    0% { transform:translateX( 0px); }
  25% { transform:translateX(  -20px); }
  /* 50% { transform:translateX( 60px); } */
  75% { transform:translateX( 40px); }
  100% { transform:translateX( -20px); }
}
@keyframes vertical {
	0% { transform:translateY(-20px); }
	50% { transform:translateY(  20px); }
	75% { transform:translateY(  0px); }
  100% { transform:translateY(  -20px); }
}
@keyframes cape {
	0%{ transform: translateX(0px)}
	50%{ transform: translateX(3px)}
	100%{transform: translateX(-3px)}
}
@keyframes cape2 {
	0%{
		background-color: #fff;
	}
	50%{
		background-color: #fd0;
	}
	100%{
		background-color: #fff;
	}
}
#anpanman {
	animation: horizontal 1s ease-in-out infinite alternate;
	animation-duration: 5s;
}
#anpan_body{
	animation: vertical 1s ease-in-out infinite alternate;
	animation-duration: 5s;
}
#anpan_cape_inner_0,
	#anpan_cape_inner_2,
	#anpan_cape_inner_4,
	#anpan_cape_inner_6,
	#anpan_cape_inner_8,
	#anpan_cape_inner_10,
	#anpan_cape_inner_12
{
	animation: cape 4s linear infinite alternate;
	animation-duration: 6s;
}
#anpan_cape_inner_1,
	#anpan_cape_inner_3,
	#anpan_cape_inner_5,
	#anpan_cape_inner_7,
	#anpan_cape_inner_9,
	#anpan_cape_inner_11{
	animation: cape 4s linear infinite alternate;
	animation-duration: 6s;
}
#anpan_cape_inner_body{
    position:  absolute;
    width:0;
    height:0;
    top: 80px;
    left: -110px;
    border-top: 320px solid #2e2326;
    border-left: 370px solid transparent;
    border-right: 370px solid transparent;
}
#anpan_cape{
	position: absolute;
	top: 0;
    left: -45px;
}