CSS Hot Air Balloon

css-hot-air-balloon.markdown

CSS Hot Air Balloon

A Pen by okpalan86 on CodePen.

License.

index.html

<main class="hotair-balloon">
    <div class="cloud"></div>

  <div class="balloon"></div>
  <div class="basket"></div>  
</main>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.scss

.rotated {
    --s: 80px;
    /* control the size */
    --c: #542437;

    --_g:
        #b22f2f93 calc(-650%/13) calc(50%/13), var(--c) 0 calc(100%/13),
        #e04a4ac6 0 calc(150%/13), var(--c) 0 calc(200%/13),
        #4cec86b9 0 calc(250%/13), var(--c) 0 calc(300%/13);
    --_g0: repeating-linear-gradient(45deg, var(--_g));
    --_g1: repeating-linear-gradient(-45deg, var(--_g));
    background:
        var(--_g0), var(--_g0) var(--s) var(--s),
        var(--_g1), var(--_g1) var(--s) var(--s) #C02942;
    background-size: calc(2*var(--s)) calc(2*var(--s));
}

.hypnotic {
    --r: 56px;
    /* control the size */
    --c1: #3FB8AF
        /*color 1*/
        99%, #0000 101%;
    --c2: #FF9E9D
        /*color 2*/
        99%, #0000 101%;

    --s: calc(var(--r)*.866);
    /* .866 = cos(30deg) */
    --g0: radial-gradient(var(--r), var(--c1));
    --g1: radial-gradient(var(--r), var(--c2));
    --f: radial-gradient(var(--r) at calc(100% + var(--s)) 50%, var(--c1));
    --p: radial-gradient(var(--r) at 100% 50%, var(--c2));
    background:
        var(--f) 0 calc(-5*var(--r)/2),
        var(--f) calc(-2*var(--s)) calc(var(--r)/2),
        var(--p) 0 calc(-2*var(--r)),
        var(--g0) var(--s) calc(-5*var(--r)/2),
        var(--g1) var(--s) calc(5*var(--r)/2),
        radial-gradient(var(--r) at 100% 100%, var(--c1)) 0 calc(-1*var(--r)),
        radial-gradient(var(--r) at 0% 50%, var(--c1)) 0 calc(-4*var(--r)),
        var(--g1) calc(-1*var(--s)) calc(-7*var(--r)/2),
        var(--g0) calc(-1*var(--s)) calc(-5*var(--r)/2),
        var(--p) calc(-2*var(--s)) var(--r),
        var(--g0) calc(-1*var(--s)) calc(var(--r)/ 2),
        var(--g1) calc(-1*var(--s)) calc(var(--r)/-2),
        var(--g0) 0 calc(-1*var(--r)),
        var(--g1) var(--s) calc(var(--r)/-2),
        var(--g0) var(--s) calc(var(--r)/ 2) #FF9E9D;
    /*color 2 again here */
    background-size: calc(4*var(--s)) calc(6*var(--r));
}

.evermore {
    --s: 150px;
    /* control the size */


    background:
        linear-gradient(135deg, #0000 18.75%, #5E412F 0 31.25%, #1598a1ce 0),
        repeating-linear-gradient(45deg, #5E412F -6.25% 6.25%, #FCEBB6 0 18.75%);
    background-size: var(--s) var(--s);
}

.rvo {
    --s: 120px;
    /* control the size */
    --c1: #4E395D;
    --c2: #8EBE94;

    --_g: var(--c1) 15%, var(--c2) 0 28%, #0000 0 72%, var(--c2) 0 85%, var(--c1) 0;
    background:
        conic-gradient(from 90deg at 2px 2px, #0000 25%, var(--c1) 0) -1px -1px,
        linear-gradient(-45deg, var(--_g)), linear-gradient(45deg, var(--_g)),
        conic-gradient(from 90deg at 40% 40%, var(--c1) 25%, var(--c2) 0) calc(var(--s)/-5) calc(var(--s)/-5);
    background-size: var(--s) var(--s);
}

.circular {
    --s: 120px;
    /* control the size*/
    --_g: radial-gradient(#bcae16cf 80%, #1340bdb3 51%, rgb(18, 120, 45) 15%);
    background:
        var(--_g), var(--_g) calc(var(--s)/2) calc(var(--s)/2),
        conic-gradient(#0f9177 25%, #fdebad 10% 50%, #d34434 15% 75%, #b5d999 0);
    background-size: var(--s) var(--s);
}


.moon {
    background-color: #e5e5f7;
    opacity: 0.8;
    background-image: radial-gradient(at 10px 10px, #2f3387, #444cf7 50%, #e5e5f7 50%);
    background-size: 10px 10px;
}


.balloon {
  width: 9.35rem;
  height: 9.35rem;
  background-color: #F27C68;
  border-radius: 50%;
  border: 4px solid #D7E7EA;
  position: absolute;
  left: 50%;
  top: 50px;
  transform: translate(-50%);
  -webkit-animation: moving-balloon 3s ease infinite;
  animation: moving-balloon 3s ease infinite;
    
  
  &::after {
    width: 4.35rem;
    height: 0;
    border-top: 3.75rem solid #F27C68;
    border-left: 1.85rem solid transparent;
    border-right: 1.85rem solid transparent;
    content: "";
    position: absolute;
    top: 100px;
    left: 50%;
    transform: translate(-50%);
  }

  &::before {
    width: 70px;
    height: 25px;
    background-color: #E86B5A;
    border-radius: 5px;
    content: "";
    position: absolute;
    left: 50%;
    top: 9.35rem;
    transform: translate(-50%);
  }
}

.basket {
  width: 2.65rem;
  height: 1.75rem;
  background: #D1C1A6;
  border-radius: 0 0 3px 3px;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 16.85rem;
  -webkit-animation: moving-basket 3s ease infinite;
  animation: moving-basket 3s ease infinite;

  &:before {
    width: 3.15rem;
    height: 0.65rem;
    background: #B2A082;
    border-radius: 3px;
    content: "";
    position: absolute;
    top: -0.65rem;
    left: 50%;
    transform: translate(-50%);
  }

  &:after {
    width: 1.55rem;
    height: 2.15rem;
    border-left: 2px solid #B2A082;
    border-right: 2px solid #B2A082;
    content: "";
    position: absolute;
    top: -2.5rem;
    left: 50%;
    transform: translate(-50%) perspective(50px) rotateX(-40deg);
  }
}

.cloud {
  width: 140px;
  height: 1.85rem;
  background: skyblue;
  border-radius: 3.15rem;
  position: absolute;
  top: 6.25rem;
  right: 2.5rem;
  -webkit-animation: moving-cloud 3s ease infinite;
  animation: moving-cloud 3s ease infinite;
  
  &::before {
    width: 3.75rem;
    height: 3.75rem;
    background: skyblue;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: -2.5rem;
    left: 1.25rem;
  }

  &::after {
    width: 3.15rem;
    height: 3.15rem;
    background: skyblue;
    border-radius: 50%;
    content: "";
    position: absolute;
    top: -1.85rem;
    right: 1.55rem;
  }
}

.hotair-balloon {
  width: 25rem;
  height: 25rem;
  margin-top: 2rem;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

body {
  background-color: #DCF1F2;
}

@-webkit-keyframes moving-balloon {
  0% {
    transform: translate(-50%);
  }

  50% {
    transform: translate(-50%, -10%);
  }
}

@keyframes moving-balloon {
  0% {
    transform: translate(-50%);
  }

  50% {
    transform: translate(-50%, -10%);
  }
}

@-webkit-keyframes moving-basket {
  0% {
    transform: translate(-50%);
  }

  50% {
    transform: translate(-50%, -40%);
  }
}

@keyframes moving-basket {
  0% {
    transform: translate(-50%);
  }

  50% {
    transform: translate(-50%, -40%);
  }
}

@-webkit-keyframes moving-cloud {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-7%);
  }
}

@keyframes moving-cloud {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-7%);
  }
}

styles

<link href="https://codepen.io/udyux/pen/jWMbjG.postcss" rel="stylesheet" />