First add base with HTML ,Than Add Some SCSS
<div id="container">
<div class="ghost">
<div class="body">
<div class="face">
<div class="eyes"></div>
<div class="mouth"></div>
</div>
<div class="bottom">
<div class="circle"></div>
<div class="circle"></div>
<div class="circle"></div>
<div class="wave"></div>
</div>
</div>
<div class="shadow"></div>
</div>
</div>```
$white: #fff;
$gray: #dbdbdb;
$darkgray: #c3c7cb;
$eyes: #195157;
$shadow: #174142;
$bg: #2b998c;
@mixin pseudo ($content: "") {
position: absolute;
content: $content;
}
* {
box-sizing: border-box;
::before, ::after {
box-sizing: border-box;
}
}
body {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
min-height: 100vh;
background: $bg;
}
#container {
width: 10rem;
height: 18rem;
}
.ghost {
position: relative;
.body {
width: 10rem;
height: 18rem;
background: $white;
border-radius: 5rem 5rem 1rem 1rem;
box-shadow: inset -1.25rem;
animation: ghostFloat 2s ease-in-out infinite;
.face {
position: absolute;
top: 4.2rem;
left: 2.8rem;
.eyes {
width: 1.9rem;
height: 2.6rem;
background: $eyes;
border-radius: 50%;
animation: eyesBlink 3s linear infinite;
&::before {
@include pseudo;
width: 85%;
height: inherit;
left: 4.3rem;
background: inherit;
border-radius: inherit;
}
}
.mouth {
position: absolute;
top: 2.5rem;
left: .2rem;
background: $white;
width: 6rem;
height: 2rem;
border-radius: 50%;
&::after {
@include pseudo;
z-index: -1;
width: 83%;
left: .3rem;
height: inherit;
border-radius: 50%;
box-shadow: 0px 5px 0px 0px $eyes;
}
}
}
}
.bottom {
position: absolute;
top: 17rem;
.circle {
position: absolute;
z-index: 2;
width: 2.23rem;
height: 2.2rem;
background: $white;
border-radius: 0 0 1rem 1rem;
&:nth-child(1) {
left: 0;
}
&:nth-child(2) {
left: 3.9rem;
border-radius: 1rem;
}
&:nth-child(3) {
left: 7.8rem;
}
}
.wave {
position: relative;
z-index: 1;
left: 2rem;
width: 2.2rem;
height: 2.2rem;
background: $darkgray;
border-radius: 1rem;
box-shadow: inset 0rem 1.1rem 0 $white;
&::before {
@include pseudo;
left: 3.9rem;
width: inherit;
height: inherit;
background: inherit;
border-radius: inherit;
box-shadow: inherit;
}
}
}
}
.shadow {
position: absolute;
width: 10rem;
height: 1rem;
top: 20rem;
border-radius: 50%;
background: $shadow;
filter: blur(0.1rem);
animation: shadowAnimation 2s linear infinite;
}
@keyframes ghostFloat {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-1rem);
}
}
@keyframes eyesBlink {
0%, 30%, 38%, 100% {
transform: scale(1);
}
34%, 36% {
transform: scale(1,0);
}
}
@keyframes shadowAnimation {
0%, 100% {
opacity: 100%;
transform: scale(1);
}
50% {
opacity: 70%;
transform: scale(0.9, 0.9);
}
}
Result
Top comments (0)