In this post, we will create Mickey Mouse Face with CSS.
HTML
<div class="container">
<div class="circle"></div>
<div class="head">
<div class="left_ear"></div>
<div class="right_ear"></div>
<div class="lower_face"></div>
<div class="left_face"></div>
<div class="right_face"></div>
<div class="lower_left_face"></div>
<div class="right_left_face"></div>
<div class="mouth_1"></div>
<div class="mouth_2"></div>
<div class="mouth_3"></div>
<div class="mouth_4"></div>
<div class="tongue_1"></div>
<div class="left_eye"></div>
<div class="left_eyeball"></div>
<div class="right_eye"></div>
<div class="right_eyeball"></div>
<div class="nose_1"></div>
<div class="nose_2"></div>
<div class="clearup_1"></div>
<div class="clearup_2"></div>
<div class="clearup_3"></div>
<div class="clearup_4"></div>
<div class="clearup_5"></div>
<div class="clearup_6"></div>
</div>
</div>CSS
html{
box-sizing: border-box;
}
*, *::before, *::after{
box-sizing: inherit;
}
body{
padding: 0;
margin: 0;
height: 100vh;
background-color: #a7cef3;
display: flex;
justify-content: center;
align-items: center;
}
.circle{
width:370px;
height: 370px;
background: radial-gradient(circle, rgba(246,93,59,1) 0%, rgba(250,155,133,1) 100%);
border: 10px solid #fff;
border-radius: 50%;
position:absolute;
top: 125px;
left: 453px;
}
.head{
width: 285px;
height: 300px;
background-color: #000;
border-radius: 50%;
position: relative;
transform: rotate(-9deg);
}
.left_ear{
width: 170px;
height: 180px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: -80px;
left: -70px;
transform: rotate(25deg);
}
.right_ear{
width: 170px;
height: 180px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: -80px;
right: -70px;
transform: rotate(-25deg);
}
.left_face{
width: 150px;
height: 200px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 25px;
left: 40px;
transform: rotate(-9deg);
}
.right_face{
width: 150px;
height: 200px;
background-color: #fbd9c2;
position: absolute;
border-radius: 50%;
top: 25px;
right: 40px;
transform: rotate(9deg);
}
.lower_left_face{
width: 100px;
height: 200px;
background-color: #fbd9c2;
position: absolute;
border-radius: 50%;
top: 125px;
left: 25px;
transform: rotate(-53deg);
}
.right_left_face{
width: 100px;
height: 200px;
background-color: #fbd9c2;
position: absolute;
border-radius: 50%;
top: 125px;
right: 25px;
transform: rotate(53deg);
}
.lower_face{
width: 160px;
height: 250px;
background-color: #fbd9c2;
position: absolute;
border-radius: 50%;;
top: 63px;
left: 63px;
border: 2px solid #000;
}
.left_eye{
width: 40px;
height: 85px;
background-color: #fff;
border:3px solid #000;
border-radius: 50%;
position: absolute;
top: 85px;
left: 98px;
transform: rotate(-4deg);
}
.left_eyeball{
width: 20px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 137px;
left: 115px;
}
.left_eyeball::before{
content: '';
width: 6px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
left: 4px;
}
.right_eye{
width: 40px;
height: 85px;
background-color: #fff;
border:3px solid #000;
border-radius: 50%;
position: absolute;
top: 85px;
right: 98px;
transform: rotate(4deg);
}
.right_eyeball{
width: 20px;
height: 30px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 137px;
right: 115px;
}
.right_eyeball::before{
content: '';
width: 6px;
height: 10px;
background-color: #fff;
border-radius: 50%;
position: absolute;
right: 4px;
}
.nose_1{
width: 100px;
height: 50px;
background-color: #fff;
position: absolute;
top: 165px;
left: 90px;
border-radius: 50%;
border-top: 3px solid #000;
background-color: #fbd9c2;
}
.nose_2{
width: 85px;
height: 60px;
position: absolute;
top: 175px;
left: 97px;
border-radius: 50%;
background-color: #000;
}
.nose_2::before{
content: '';
width: 45px;
height: 20px;
position: absolute;
top: 5px;
left: 22px;
border-radius: 50%;
background-color: #fff;
}
.mouth_1{
width: 180px;
height: 130px;
background-color: #000;
border-radius: 50%;
position: absolute;
top: 150px;
left: 53px;
transform: rotate(90deg);
}
.mouth_2{
width: 230px;
height: 150px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 110px;
left: 25px;
border-bottom: 5px solid #000;
}
.mouth_3{
width: 15px;
height: 25px;
background-color: transparent;
border-left: 4px solid #000;
border-radius: 45%;
position: absolute;
top: 196px;
left: 25px;
transform: rotate(55deg);
}
.mouth_4{
width: 15px;
height: 25px;
background-color: transparent;
border-right: 4px solid #000;
border-radius: 45%;
position: absolute;
top: 192px;
right: 25px;
transform: rotate(-55deg);
}
.tongue_1{
width: 60px;
height: 30px;
background-color: #ed8779;
border-radius: 50%;
border-top-right-radius: 25px;
border-top-left-radius: 15px;
position: absolute;
top: 270px;
left: 113px;
}
.tongue_1::before{
content: '';
width: 25px;
height: 25px;
background-color: transparent;
border-right: 5px solid #000;
border-radius: 50%;
position: absolute;
top: -2px;
left: 17px;
transform:rotate(-45deg);
}
.clearup_1{
width: 20px;
height: 20px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 175px;
right: 85px;
}
.clearup_2{
width: 20px;
height: 20px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 175px;
left: 85px;
}
.clearup_3{
width: 19px;
height: 19px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 183px;
left: 15px;
}
.clearup_4{
width: 19px;
height: 19px;
background-color: #fbd9c2;
border-radius: 50%;
position: absolute;
top: 177px;
right: 19px;
}
.clearup_5{
width: 2px;
height: 30px;
background: #000;
position: absolute;
top: 200px;
left: 35px;
transform: rotate(-39deg);
}
.clearup_6{
width: 2px;
height: 28px;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
background: #000;
position: absolute;
top: 196px;
right: 36px;
transform: rotate(35deg);
}