Edited at

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;
}