Skip to content
Advertisements

CSS Mustache


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

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: