HTML5+CSS3-도라에몽

机器猫

* {

여백: 0;

패딩: 0;

}

.whole {

너비: 800px;

여백: 20px 자동;

/*border: 2px 단색 노란색;*/

background-color: 흰색;

위치: 상대;

}

.head {

여백: 0 auto;

위치: 상대;

너비: 500px;

높이: 440px;

배경색: #00b7e7;

테두리 반경: 220px;

테두리: 1px 단색 빨간색;

}

.eye .left_eye,

.eye .right_eye {

너비: 100px ;

높이: 130px;

배경색: 흰색;

테두리: 2px 단색 검정;

테두리 반경: 50px;

위치: 절대;

상단: 50px;

z-index: 3;

}

.eye .LeyeBall,

.eye .ReyeBall {

너비: 20px;

높이: 20px;

배경: 검정색;

테두리 반경: 10px;

위치: 절대;

상단: 65px;

}

.eye .left_eye {

왼쪽: 146px;

}

.eye .right_eye {

왼쪽: 250px;

}

.eye .LeyeBall {

오른쪽: 10px;

}

.eye . ReyeBall {

왼쪽: 10px;

}

.face {

위치: 상대;

z-색인: 2;

}

.face .feature {

너비: 400px;

높이: 320px;

테두리 반경: 160px;

위치: 절대;

위쪽: 100px;

왼쪽: 50px;

배경: 흰색;

}

.face .nose {

너비: 45px;

높이: 50px;

테두리 반경: 23px;

배경색: #cf3318;

테두리: 2px 단색 검정색;

위치: 절대;

상단 : 165px;

왼쪽: 225px;

z-index: 3;

}

.face .Nline {

너비: 3px;

높이: 160px;

배경: 검정색;

위치: 절대;

상단: 218px;

왼쪽: 248px;

z-index: 3;

}

.face .mouth {

너비: 280px;

높이: 280px;

테두리 하단: 5px 단색 검정색;

테두리 반경: 140px;

위치: 절대 ;

위쪽: 98px;

왼쪽: 105px;

}

.face .mustache .MutR_higher {

너비: 80px;

높이: 2px;

배경: 검정색;

위치: 절대;

상단: 220px;

왼쪽: 295px;

z-index: 2;

}

.face .mustache .MutR_middle {

너비: 80px;

높이: 2px;

배경: 검정색;

위치: 절대;

상단: 240px;

왼쪽: 295px;

z-index: 2;

}

.face .mustache .MutR_lower {

너비 : 80px;

높이: 2px;

배경: 검정색;

위치: 절대;

상단: 260px;

왼쪽 : 295px;

z-index: 2;

}

.face .mustache .MutL_top {

너비: 80px ;

높이: 2px;

배경: 검정색;

위치: 절대;

위쪽: 220px;

왼쪽: 115px ;

z-색인: 2;

}

.face .mustache .MutL_center {

너비: 80px;

높이: 2px;

배경: 검정색;

위치: 절대;

위쪽: 240px;

왼쪽: 115px;

z-색인: 2;

}

.face .mustache .MutL_bottom {

너비: 80px;

높이: 2px;

배경: 검정색;

위치: 절대;

위쪽: 260px;

왼쪽: 115px;

z-색인: 2;

}

.face .mustache .MutL_bottom,

.face .mustache .MutR_higher {

변환: 회전(160deg);

}

.face .mustache .MutL_top,

.face .mustache .MutR_lower {

변환: 회전(200deg);

}

.neck {

너비: 300px;

높이: 30px;

배경색: #a31f12;

테두리: 2px 단색 검정;

테두리 반경: 15px;

위치: 상대;

위쪽: 0px;

왼쪽: 250px;

z-색인: 4;

}

.neck .bell {

너비: 60px;

높이: 60px;

오버플로: 숨김;

테두리: 2px 단색 검정;

테두리 반경: 60px;

background-color: #cfcb3c;

position: absolute;

top: 5px;

left: 120px;

}

.bell .Bline {

width: 60px;

height: 2px;

background-color: #cfcb3c;

border: 2px solid black;

border-radius: 3px 3px 0 0;

position: absolute;

top: 15px;

}

.bell .Bcircle {

width: 20px;

height: 16px;

background: black;

border-radius: 8px;

position: absolute;

top: 25px;

left: 20px;

}

.bell .Bunderpart {

width: 3px;

height: 20px;

background-color: black;

position: absolute;

left: 28px;

top: 40px;

}

.body {

position: relative;

top: -300px;

z-index: 1;

}

.body .tummy {

width: 280px;

height: 240px;

background-color: #00b1e1;

border: 2px solid black;

position: absolute;

top: 267px;

left: 260px;

}

.body .bellyband {

width: 220px;

height: 220px;

background-color: white;

border: 2px solid black;

border-radius: 110px;

position: absolute;

left: 290px;

top: 267px;

}

.body .pocket {

width: 160px;

height: 160px;

border-radius: 80px;

background-color: white;

border: 2px solid black;

position: absolute;

top: 305px;

left: 320px;

}

.cover {

width: 164px;

height: 80px;

background-color: white;

border-bottom: 2px solid black;

/*border: 5px solid orange;*/

position: absolute;

top: 300px;

left: 320px;

}

.left_hand,

.right_hand {

height: 100px;

width: 100px;

position: absolute;

top: 272px;

left: 248px;

}

.left_hand {

left: -10px;

}

.left_hand .Larm {

width: 70px;

height: 100px;

background-color: #00bee8;

border: 1px solid black;

position: relative;

top: 200px;

left: 535px;

transform: rotateZ(135deg);

/*z-index: -1;*/

}

.right_hand {

left: -10px;

}

.right_hand .Rarm {

width: 70px;

height: 100px;

background-color: #00bee8;

border: 1px solid black;

/*z-index: -1;*/

position: relative;

top: 200px;

left: 215px;

transform: rotateZ(45deg);

}

.left_hand .Lpalm,

.right_hand .Rpalm {

width: 80px;

height: 80px;

border-radius: 40px;

border: 2px solid black;

background-color: white;

position: absolute;

}

.right_hand .Rpalm {

left: 580px;

top: 260px;

z-index: 1;

}

.left_hand .Lpalm {

left: 160px;

top: 260px;

z-index: 1;

}

.foot .left_foot,

.foot .right_foot {

width: 150px;

height: 40px;

background-color: white;

border: 2px solid black;

border-radius: 80px 60px 60px 40px;

position: relative;

}

.foot .left_foot {

left: 240px;

top: 210px;

}

.foot .right_foot {

top: 165px;

left: 410px;

}

.foot .crotch {

width: 40px;

height: 20px;

background-color: white;

border: 2px solid black;

border-bottom: none;

border-radius: 40px 40px 0 0;

position: relative;

top: 103px;

left: 382px;

z-index: 2

}

</div&gt ;

&lt ;div class="left_hand">

</div&gt ;

HTML5+CSS3-도라에몽

관련 기사