DEV Community

Cover image for How to Make Ghost Animation Only CSS
frontend
frontend

Posted on

How to Make Ghost Animation Only CSS

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



Enter fullscreen mode Exit fullscreen mode

Result

Result

Top comments (0)