HTML CODE:
<!DOCTYPE html>
<html>
<head>
<title>page</title>
<link rel="stylesheet" type="text/css" href="mustache.css">
</head>
<body>
<div class="mustache"></div>
</body>
</html>
CSS CODE:
.mustache{
position: absolute;
top:25%;
left:35%;
transform:translate(-50%,-50%);
width: 180px;
height: 180px;
border-radius: 50%;
color: #000;
box-shadow: 150px 240px 0 0 black,300px 240px 0 0 black;
}
.mustache::before{
content: "";
position: absolute;
top: 120px;
left: 30px;
width: 210px;
height: 120px;
border-bottom: solid 180px black;
border-radius: 0 0 0 100%;
transform: rotate(-40deg);
transform-origin: right 210px;
animation: shakeLeft 1s ease-in-out infinite
}
.mustache::after{
content: "";
position: absolute;
top: 120px;
left: 390px;
width: 210px;
height: 120px;
border-bottom: solid 180px black;
border-radius: 0 0 100% 0;
transform: rotate(40deg);
transform-origin:left 210px;
animation: shakeRight 1s ease-in-out infinite
}
@keyframes shakeLeft{
0%{
transform: rotate(-50deg);
}
50%{
transform: rotate(-30deg);
}
100%{
transform: rotate(-50deg);
}
}
@keyframes shakeRight{
0%{
transform: rotate(50deg);
}
50%{
transform: rotate(30deg);
}
100%{
transform: rotate(50deg);
}
}
TrueCodes 
Leave a comment