Dancing Cactus by

Simone Bernabè

On: 27 Jul 2016

Personal site: http://codepen.io/simoberny/

fullscreen 
<div class="container">
  <div class="cont-sun">
    <div class="sun"></div>
    <div class="moon"></div>
  </div>
  <div class="cont-cactus">
    <div class="body-cactus">
      <div class="eye-left"></div>
      <div class="eye-right"></div>
      <div class="spina-1"></div>
      <div class="spina-2"></div>
      <div class="spina-3"></div>
      <div class="spina-4"></div>
      <div class="spina-5"></div>
      <div class="spina-6"></div>
      <div class="spina-7"></div>
      <div class="mouth"></div>
    </div>
    <div class="left-hand"></div>
    <div class="right-hand"></div>
  </div>
  <div class="cont-terrain">
    <div class="terrain"></div>
    <div class="se-terrain"></div>
  </div>
  <div class="mountain"></div>
  <div class="tree"></div>
</div>

html, body {
  margin: 0;
  background: #90CAF9;
  overflow: hidden;
  -webkit-animation: sky-color 7s infinite linear;
          animation: sky-color 7s infinite linear;
}

.absolute-center, .container, .cont-cactus, .cont-cactus .body-cactus, .cont-cactus .body-cactus .mouth, .cont-terrain, .cont-terrain .terrain:after, .cont-sun, .cont-sun .sun, .cont-sun .moon {
  margin: auto;
  left: 0;
  right: 0;
}

.container {
  position: absolute;
  width: 600px;
  height: 500px;
  bottom: 0;
}

.cont-cactus {
  position: absolute;
  display: block;
  width: 270px;
  height: 270px;
  bottom: 50px;
  z-index: 50;
}
.cont-cactus .body-cactus {
  position: absolute;
  border-top-left-radius: 55%;
  border-top-right-radius: 55%;
  border-bottom-right-radius: 40% 120px;
  border-bottom-left-radius: 40% 120px;
  width: 150px;
  height: 190px;
  background: red;
  background: -webkit-linear-gradient(left, #1B5E20, #66BB6A, #1B5E20);
  background: linear-gradient(to right, #1B5E20, #66BB6A, #1B5E20);
  bottom: 0;
  z-index: 50;
  -webkit-animation: body-move 3s linear infinite;
          animation: body-move 3s linear infinite;
}
.cont-cactus .body-cactus:after {
  content: '';
  display: block;
  position: absolute;
  height: 170px;
  width: 40px;
  border-radius: 50%;
  border-left: 3px solid #DCE775;
  opacity: 0.5;
  left: 35px;
  top: 10px;
}
.cont-cactus .body-cactus:before {
  content: '';
  display: block;
  position: absolute;
  height: 170px;
  width: 40px;
  border-radius: 50%;
  opacity: 0.5;
  border-right: 3px solid #DCE775;
  right: 35px;
  top: 10px;
}
.cont-cactus .body-cactus .eye-left {
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  right: 17px;
  top: 17px;
  border: 2px solid #8BC34A;
  z-index: 1;
}
.cont-cactus .body-cactus .eye-left:after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
  margin: 15px;
}
.cont-cactus .body-cactus .eye-left:before {
  content: '';
  display: block;
  position: absolute;
  width: 55px;
  height: 12px;
  background: #1B5E20;
  -webkit-transform: rotateZ(-30deg);
  transform: rotateZ(-30deg);
  right: 5px;
  border-radius: 10px 0px 5px 0;
  -webkit-animation: eye-move 7s infinite linear;
          animation: eye-move 7s infinite linear;
}
.cont-cactus .body-cactus .eye-right {
  position: absolute;
  width: 50px;
  height: 50px;
  background: white;
  border-radius: 50%;
  left: 17px;
  top: 17px;
  border: 2px solid #8BC34A;
  z-index: 1;
}
.cont-cactus .body-cactus .eye-right:after {
  content: '';
  display: block;
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: black;
  margin: 15px;
}
.cont-cactus .body-cactus .eye-right:before {
  content: '';
  display: block;
  position: absolute;
  width: 55px;
  height: 12px;
  background: #1B5E20;
  -webkit-transform: rotateZ(30deg);
  transform: rotateZ(30deg);
  left: 5px;
  border-radius: 0 10px 0 5px;
  -webkit-animation: eye-move 7s infinite linear;
          animation: eye-move 7s infinite linear;
}
.cont-cactus .body-cactus .mouth {
  position: absolute;
  width: 70px;
  height: 35px;
  border: 3px solid #AED581;
  background: red;
  background: -webkit-radial-gradient(black, #33691E, #689F38);
  background: -webkit-radial-gradient(#000000, #33691e, #689f38);
  background: radial-gradient(#000000, #33691e, #689f38);
  border-radius: 5px 5px 70% 70%;
  top: 95px;
}
.cont-cactus .right-hand {
  position: absolute;
  width: 45px;
  height: 45px;
  background: #2E7D32;
  right: 0;
  border-radius: 50%;
  margin: 20px;
  -webkit-animation: dance-hand 7s infinite linear;
          animation: dance-hand 7s infinite linear;
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
  border: 3px solid #8BC34A;
}
.cont-cactus .right-hand:before {
  position: absolute;
  content: '';
  display: block;
  width: 20px;
  height: 40px;
  background: #7CB342;
  border-radius: 10px;
  top: -15px;
  left: -7px;
  opacity: 0;
  -webkit-animation: eye-move 7s infinite linear;
          animation: eye-move 7s infinite linear;
}
.cont-cactus .right-hand:after {
  position: absolute;
  content: '';
  display: block;
  width: 20px;
  height: 40px;
  background: #7CB342;
  border-radius: 10px;
  right: -7px;
  top: -15px;
  opacity: 0;
  -webkit-animation: eye-move 7s infinite linear;
          animation: eye-move 7s infinite linear;
}
.cont-cactus .left-hand {
  position: absolute;
  width: 45px;
  height: 45px;
  background: #2E7D32;
  border-radius: 50%;
  margin: 20px;
  -webkit-animation: dance-hand 7s infinite linear;
          animation: dance-hand 7s infinite linear;
  -webkit-transform-origin: right bottom;
          transform-origin: right bottom;
  border: 3px solid #8BC34A;
}

.cont-terrain {
  position: absolute;
  bottom: -450px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  overflow: hidden;
  z-index: 15;
  border: 3px solid #3E2723;
}
.cont-terrain .terrain {
  position: absolute;
  top: 60px;
  background: -webkit-linear-gradient(#A1887F, #4E342E);
  background: linear-gradient(#A1887F, #4E342E);
  width: 100%;
  height: 100px;
  border-radius: 80% 80% 0 0;
}
.cont-terrain .terrain:after {
  content: '';
  display: block;
  position: absolute;
  width: 100px;
  height: 13px;
  box-shadow: 0px 5px 20px 10px rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.8);
  z-index: 30;
  top: 35px;
}
.cont-terrain .se-terrain {
  position: absolute;
  height: 100px;
  width: 100%;
  background: -webkit-linear-gradient(#FFA726, #FFE082);
  background: linear-gradient(#FFA726, #FFE082);
  top: 0px;
  z-index: 10;
  border-radius: 50% 50% 0 0;
}

.spina, .spina-1, .spina-2, .spina-3, .spina-4 {
  position: absolute;
  width: 3px;
  height: 17px;
  border-radius: 50% 50% 0 0;
  background: #FDD835;
  -webkit-transform: rotateZ(-40deg);
  transform: rotateZ(-40deg);
}

.spina-rot, .spina-5, .spina-6, .spina-7 {
  position: absolute;
  width: 3px;
  height: 17px;
  border-radius: 50% 50% 0 0;
  background: #FDD835;
  -webkit-transform: rotateZ(40deg);
  transform: rotateZ(40deg);
  right: 0;
}

.spina-1 {
  margin-left: 42px;
  margin-top: 0px;
}

.spina-2 {
  margin-top: 75px;
  margin-left: 25px;
}

.spina-3 {
  margin-top: 120px;
  margin-left: 5px;
}

.spina-4 {
  margin-top: 140px;
  margin-left: 70px;
}

.spina-5 {
  margin-top: 7px;
  margin-right: 25px;
}

.spina-6 {
  margin-top: 120px;
  margin-left: 80px;
}

.spina-7 {
  margin-top: 80px;
  margin-right: 30px;
}

.cont-sun {
  position: absolute;
  width: 300px;
  height: 290px;
  -webkit-transform-origin: bottom center;
          transform-origin: bottom center;
  bottom: 180px;
  -webkit-transform: rotateZ(-90deg);
  transform: rotateZ(-90deg);
  -webkit-animation: sun-rotation 7s infinite linear;
          animation: sun-rotation 7s infinite linear;
}
.cont-sun .sun {
  position: absolute;
  background: #F0F4C3;
  width: 100px;
  height: 100px;
  top: 0px;
  border: 10px solid #FFF59D;
  -webkit-animation: sun-color 7s infinite linear;
          animation: sun-color 7s infinite linear;
}
.cont-sun .moon {
  position: absolute;
  border-left: 10px solid #F5F5F5;
  width: 100px;
  height: 100px;
  bottom: -250px;
  border-radius: 50%;
}

.mountain {
  position: absolute;
  bottom: 70px;
  width: 80px;
  height: 110px;
  border-radius: 70% 10px 2px 1px;
  box-shadow: 0 2px 5px #5D4037;
  background: #3E2723;
  z-index: 10;
  right: 80px;
  bottom: 35px;
  -webkit-transform: rotateZ(25deg);
  transform: rotateZ(25deg);
}
.mountain:after {
  content: '';
  display: block;
  position: absolute;
  width: 110px;
  height: 60px;
  border-radius: 50px 2% 2px 1px;
  border-left: 2px solid black;
  box-shadow: 0 2px 5px #5D4037;
  background: #3E2723;
  top: 30px;
  left: -75px;
}

.tree {
  position: absolute;
  z-index: 10;
  left: 150px;
  width: 3px;
  height: 100px;
  bottom: 80px;
  -webkit-transform: rotateZ(-25deg);
  transform: rotateZ(-25deg);
  background: #BDBDBD;
  border: 1px solid #FFE0B2;
  box-shadow: 0px 3px 1px  black;
  z-index: 15;
}
.tree:after {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 35px;
  -webkit-transform: rotateZ(45deg);
  transform: rotateZ(45deg);
  background: #BDBDBD;
  border: 1px solid #FFE0B2;
  left: 13px;
}
.tree:before {
  content: '';
  display: block;
  position: absolute;
  width: 2px;
  height: 20px;
  -webkit-transform: rotateZ(-25deg);
  transform: rotateZ(-25deg);
  background: #BDBDBD;
  border: 1px solid #FFE0B2;
  right: 5px;
  top: 30px;
}

@-webkit-keyframes dance-hand {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  5% {
    -webkit-transform: rotateZ(-40deg);
    transform: rotateZ(-40deg);
  }
  10% {
    -webkit-transform: rotateZ(40deg);
    transform: rotateZ(40deg);
  }
  15% {
    -webkit-transform: rotateZ(-15deg) scaleY(0.5);
    transform: rotateZ(-15deg) scaleY(0.5);
  }
  20% {
    -webkit-transform: rotateZ(15deg) scaleY(1.2);
    transform: rotateZ(15deg) scaleY(1.2);
  }
  30% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  40% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  45% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  55% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  65% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  70% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  75% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  78% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  83% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  90% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}

@keyframes dance-hand {
  0% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
  5% {
    -webkit-transform: rotateZ(-40deg);
    transform: rotateZ(-40deg);
  }
  10% {
    -webkit-transform: rotateZ(40deg);
    transform: rotateZ(40deg);
  }
  15% {
    -webkit-transform: rotateZ(-15deg) scaleY(0.5);
    transform: rotateZ(-15deg) scaleY(0.5);
  }
  20% {
    -webkit-transform: rotateZ(15deg) scaleY(1.2);
    transform: rotateZ(15deg) scaleY(1.2);
  }
  30% {
    -webkit-transform: translateX(20px);
    transform: translateX(20px);
  }
  40% {
    -webkit-transform: translateY(40px);
    transform: translateY(40px);
  }
  45% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  50% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  55% {
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }
  60% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  65% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  70% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  75% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  78% {
    -webkit-transform: translateY(20px);
    transform: translateY(20px);
  }
  83% {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
  }
  90% {
    -webkit-transform: rotateZ(0deg);
    transform: rotateZ(0deg);
  }
}
@-webkit-keyframes body-move {
  0% {
    height: 190px;
  }
  25% {
    height: 200px;
  }
  50% {
    height: 185px;
  }
  75% {
    height: 195px;
  }
  100% {
    height: 190px;
  }
}
@keyframes body-move {
  0% {
    height: 190px;
  }
  25% {
    height: 200px;
  }
  50% {
    height: 185px;
  }
  75% {
    height: 195px;
  }
  100% {
    height: 190px;
  }
}
@-webkit-keyframes eye-move {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes eye-move {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  42% {
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  95% {
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@-webkit-keyframes sun-rotation {
  0% {
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  100% {
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
}
@keyframes sun-rotation {
  0% {
    -webkit-transform: rotateZ(-90deg);
    transform: rotateZ(-90deg);
  }
  100% {
    -webkit-transform: rotateZ(270deg);
    transform: rotateZ(270deg);
  }
}
@-webkit-keyframes sky-color {
  0% {
    background: #90CAF9;
  }
  75% {
    background: #001a4d;
  }
  95% {
    background: #90CAF9;
  }
}
@keyframes sky-color {
  0% {
    background: #90CAF9;
  }
  75% {
    background: #001a4d;
  }
  95% {
    background: #90CAF9;
  }
}
@-webkit-keyframes sun-color {
  0% {
    background: #F0F4C3;
  }
  75% {
    background: #FB8C00;
    border: 10px solid #E65100;
  }
  95% {
    background: #F0F4C3;
  }
}
@keyframes sun-color {
  0% {
    background: #F0F4C3;
  }
  75% {
    background: #FB8C00;
    border: 10px solid #E65100;
  }
  95% {
    background: #F0F4C3;
  }
}

25