それでは初めに完成デモをご覧ください。
完成デモ
続いて各ソースコードです。
始めにHTMLです。
HTML
続いてCSSです。
CSS
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
-o-box-sizing: border-box;
box-sizing: border-box;
}
.ear-left,
.ear-right,
.face,
.teak-left,
.teak-left:after,
.teak-right,
.teak-right:after {
background:#424242;
}
.bg {
height:400px;
margin:0 auto;
position:relative;
width:450px;
}
.ear-left,
.ear-left:after,
.ear-right,
.ear-right:after {
border-radius: 50%;
position:absolute;
}
.ear-left {
height:100px;
top:50px;
left:70px;
width:100px;
z-index:0;
}
.ear-left:after {
content:'';
height:50px;
top:50%;
left:50%;
margin-top:-25px;
margin-left:-25px;
width:50px;
}
.ear-right {
height:100px;
top:50px;
right:70px;
width:100px;
z-index:0;
}
.ear-right:after {
content:'';
height:50px;
margin-top:-25px;
margin-right:-25px;
top:50%;
right:50%;
width:50px;
}
.ear-left:after,
.ear-right:after { background:#B45F04; }
.teak-left,
.teak-left:after,
.teak-right,
.teak-right:after {
border-radius: 50%;
height:50px;
width:100px;
position:absolute;
}
.teak-left {
top:60%;
left:25px;
}
.teak-left:after {
content:'';
bottom:60%;
}
.teak-right {
top:60%;
right:25px;
}
.teak-right:after {
content:'';
bottom:60%;
}
.hair {
background:#000;
border-radius:20px 20px 50% 50%;
height:150px;
margin-left:-25px;
position:absolute;
top:0;
left:50%;
width:50px;
z-index:1;
}
.eyebrow-left {
border-left:30px solid transparent;
border-right:60px solid transparent;
border-top: 30px solid transparent;
border-bottom:40px solid #000;
height:0;
position:absolute;
top:90px;
left:120px;
width:0;
z-index:2;
}
.eyebrow-left2 {
background:#434343;
border-radius:150px 300px 100% 100% / 150px 250% 100% 100%;
height:60px;
position:absolute;
top:144px;
left:117px;
width:100px;
z-index:2;
}
.eyebrow-right {
border-left:60px solid transparent;
border-right:30px solid transparent;
border-top: 30px solid transparent;
border-bottom:40px solid #000;
height:0;
position:absolute;
top:90px;
right:120px;
width:0;
z-index:2;
}
.eyebrow-right2 {
background:#434343;
border-radius:300px 150px 100% 100% / 250% 150px 100% 100%;
height:60px;
position:absolute;
top:144px;
right:117px;
width:100px;
z-index:2;
}
.eye-left {
background:#fff;
border-left:3px solid #000;
border-radius:100% 140% 120% 100%/ 100% 120% 120% 50%;
height:90px;
overflow:hidden;
position:absolute;
top:165px;
left:145px;
width:64px;
z-index:2;
}
.eye-left:before {
background:#87CEFA;
border-radius:50%;
content:'';
height:82px;
position:absolute;
bottom:0;
right:0;
width:55px;
z-index:3;
}
.eye-left:after {
background:#000;
border-radius:50%;
content:'';
height:74px;
position:absolute;
bottom:0;
right:0;
width:46px;
z-index:4;
}
.eye-left-white {
background:#fff;
border-radius:50%;
height:20px;
position:absolute;
top:20px;
left:30px;
width:20px;
z-index:5;
}
.eye-right {
background:#fff;
border-right:3px solid #000;
border-radius:140% 100% 100% 120% / 120% 100% 50% 120%;
height:90px;
overflow:hidden;
position:absolute;
top:165px;
right:145px;
width:64px;
z-index:2;
}
.eye-right:before {
background:#87CEFA;
border-radius:50%;
content:'';
height:82px;
position:absolute;
bottom:0;
left:0;
width:55px;
z-index:3;
}
.eye-right:after {
background:#000;
border-radius:50%;
content:'';
height:74px;
position:absolute;
bottom:0;
left:0;
width:46px;
z-index:4;
}
.eye-right-white {
background:#fff;
border-radius:50%;
height:20px;
position:absolute;
top:20px;
right:30px;
width:20px;
z-index:5;
}
.face {
border-radius:120px;
height:300px;
margin-left:-150px;
position:absolute;
top:80px;
left:50%;
-moz-transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
width:300px;
}
.face-bottom {
border-radius:120px;
content:'';
height:280px;
margin-top:-140px;
margin-left:-140px;
overflow:hidden;
position:absolute;
top:50%;
left:50%;
width:280px;
}
.face-bottom:before {
background:#D2691E;
border-radius:50%;
content:'';
height:90px;
position:absolute;
bottom:-10px;
left:50px;
width:250px;
z-index:10;
}
.face-bottom:after {
background:#D2691E;
border-radius:50%;
content:'';
height:90px;
position:absolute;
top:130px;
left:120px;
-moz-transform:rotate(-90deg);
-webkit-transform:rotate(-90deg);
-ms-transform:rotate(-90deg);
-o-transform:rotate(-90deg);
transform:rotate(-90deg);
width:250px;
z-index:10;
}
.nose {
background:#D2691E;
border-radius:50%;
height:100px;
margin-left:-60px;
position:absolute;
bottom:50px;
left:50%;
width:120px;
z-index:20;
}
.nose:before {
background:#FF0000;
border-radius:50%;
content:'';
height:70px;
margin-top:-40px;
margin-left:-50px;
position:absolute;
top:50%;
left:50%;
width:100px;
}
.nose:after {
background:#fff;
border-radius:50%;
content:'';
height:20px;
margin-top:-15px;
margin-left:-5px;
position:absolute;
top:50%;
left:50%;
width:20px;
}
.mouse-top {
border-bottom:3px solid #FF0000;
border-radius:50%;
height:100px;
margin-left:-100px;
overflow:hidden;
position:absolute;
bottom:55px;
left:50%;
width:200px;
z-index:1000;
}
.mouse-top:before {
background:#fff;
border-radius:100%;
content:'';
height:15px;
margin-left:-30px;
position:absolute;
bottom:-7px;
left:50%;
width:60px;
}
.mouse-bottom {
background:#FF0000;
border-radius:50%;
height:21px;
margin-left:-32px;
position:absolute;
left:50%;
bottom:45px;
width:64px;
z-index:40;
}
CSSは記述が長く見えますが、ベンダープレフィックスを除けば特に難しい記述はありません。
以上です。