Pure CSS Candle - Animated Scene

index.html

<div class="holder">
  <div class="scene">
    <div class="preloader"><div></div><div></div></div>
    <div class="image"></div>
    <div class="candle">
      <div class="rectangle1"></div>
      <div class="rectangle5"></div>
      <div class="rectangle2"></div>
      <div class="rectangle3"></div>
      <div class="circle1"></div>
      <div class="circle2"></div>
      <div class="circle3"></div>
      <div class="rectangle4"></div>
      <div class="base1"></div>
      <div class="base2"></div>
      <div class="flames">
        <div class="flame4"></div>
        <div class="flame1"></div>
        <div class="flame2"></div>
        <div class="flame3"></div>
      </div>
    </div>
    <div class="flash"></div>
  </div>
</div>

pure-css-candle-animated-scene.markdown

Pure CSS Candle - Animated Scene

Beautiful candle scene. Almost real looking. :D

• Image from unsplash.com

A Pen by Animated Creativity on CodePen.

License.

scripts

<script src="https://showcase.ylo.one/fiverr/ad/app/build/script.js"></script>

style.css

.holder {
  position: absolute;
  left: 0%;
  top: 0%;
  right: 0%;
  bottom: 0%;
  width: 100%;
  height: 100%;
  min-height: 400px;
  background-color: #000;
}

.scene {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 50%;
  height: 0%;
  padding-bottom: 40%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}

.holder .image {
  position: absolute;
  left: 50%;
  top: 50%;
  background-image: url(https://preview.animatedcreativity.com/images/candle/roberto-tumini-12659-modified.jpg);
  background-size: cover;
  background-position: bottom;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}
.holder .flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  transform: translateX(-50%) translateY(-50%);
  background-color: #FFFD38;
  opacity: 0.1;
  animation: animateFlash 5s infinite linear;
  -webkit-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  -moz-box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
  box-shadow: inset 0px 0px 38px 5px rgba(0,0,0,0.75);
}
@keyframes animateFlash {
  0% {
    opacity: 0.1;
  }
  10% {
    opacity: 0.05;
  }
  20% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.08;
  }
  40% {
    opacity: 0.1;
  }
  50% {
    opacity: 0.05;
  }
  60% {
    opacity: 0.07;
  }
  70% {
    opacity: 0.1;
  }
  80% {
    opacity: 0.07;
  }
  90% {
    opacity: 0.09;
  }
  100% {
    opacity: 0.1;
  }
}

.candle { /*width and height ratio: 1:3*/
  position: absolute;
  left: 50%;
  bottom: -30%;
  width: 20%;
  height: 0%;
  padding-bottom: 60%;
  transform: translateX(-50%);
  filter: blur(5px);
}

.candle div {
  box-sizing: border-box;
}

.candle .rectangle1 {
  position: absolute;
  left: 50%;
  top: 55%;
  width: 75%;
  height: 70%;
  background-color: #AAAAAA; /*e9e4e4*/
  transform: translateX(-50%) translateY(-50%);
}

.candle .circle1 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 75%;
  height: 0%;
  padding-bottom: 35%;
  border-radius: 50%;
  background-color: #AAAAAA;
  transform: translateX(-50%) translateY(-50%);
}


.candle .circle2 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 55%;
  height: 0%;
  padding-bottom: 23%;
  border-radius: 50%;
  background-color: #ccc;
  transform: translateX(-50%) translateY(-50%);
}

.candle .circle3 {
  position: absolute;
  left: 50%;
  top: 19.5%;
  width: 30%;
  height: 0%;
  padding-bottom: 8%;
  border-radius: 50%;
  background-color: #b5b5b5;
  transform: translateX(-50%) translateY(-50%);
}

.candle .rectangle2 {
  position: absolute;
  left: 0%;
  top: 32.5%;
  width: 20%;
  height: 30%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(25%) translateY(-50%);
}

.candle .rectangle3 {
  position: absolute;
  right: 0%;
  top: 25.5%;
  width: 20%;
  height: 17%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(-25%) translateY(-50%);
}

.candle .rectangle5 {
  position: absolute;
  right: 0%;
  top: 32%;
  width: 5%;
  height: 13%;
  border-radius: 30%;
  background-color: #AAAAAA;
  transform: translateX(-160%) translateY(-50%);
}

.candle .rectangle4 {
  position: absolute;
  left: 50%;
  top: 15.5%;
  width: 5%;
  height: 8%;
  border-radius: 20%;
  background-color: #666;
  transform: translateX(-50%) translateY(-50%);
}

.candle .base1 {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 88%;
  height: 12%;
  border-radius: 20%;
  background-color: #AAAAAA;
  transform: translateX(-50%) translateY(-50%);
}

.candle .base2 {
  position: absolute;
  left: 50%;
  bottom: 0%;
  width: 100%;
  height: 12%;
  border-radius: 50%;
  background-color: #AAAAAA;
  transform: translateX(-50%);
}

.candle .flames {
  position: absolute;
  width: 40%;
  height: 0%;
  padding-bottom: 40%;
  transform-origin: 50% 100%;
  left: 50%;
  top: 0%;
  transform: translateX(-50%);
  animation: animateFlames 2s infinite linear;
}
@keyframes animateFlames {
  25% {
    transform: translateX(-50%) rotateZ(-10deg);
  }
  75% {
    transform: translateX(-50%) rotateZ(7deg);
  }
}
.candle .flames div {
  position: absolute;
  left: 50%;
  top: 0%;
  width: 100%;
  height: 0%;
  padding-bottom: 100%;
  border-radius: 0px;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
  border-top-right-radius: 50%;
  background-color: #FFFD38;
  transform: translateX(-50%) translateY(25%) rotateZ(45deg);
  animation: animateFlame 3s infinite linear;
  filter: blur(1px);
}

.candle .flames .flame2 {
  left: 50%;
  top: auto;
  bottom: 0.5%;
  width: 75%;
  height: 0%;
  padding-bottom: 75%;
  background-color: #FD7D23;
  animation: animateFlame 4s infinite linear;
}

.candle .flames .flame3 {
  left: 50%;
  top: auto;
  bottom: 1.5%;
  width: 50%;
  height: 0%;
  padding-bottom: 50%;
  background-color: #FB0D1B;
  animation: animateFlame 5s infinite linear;
}

.candle .flames .flame4 {
  left: 50%;
  top: auto;
  bottom: 1.5%;
  width: 200%;
  height: 0%;
  padding-bottom: 200%;
  animation: animateFlame 3s infinite linear;
  filter: blur(10px);
  opacity: 0.5;
}

@keyframes animateFlame {
  0% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(0deg);
  }
  10% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(10deg);
  }
  20% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-10deg);
  }
  30% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(5deg);
  }
  40% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-10deg);
  }
  50% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(7deg);
  }
  60% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-2deg);
  }
  70% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(8deg);
  }
  80% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(-5deg);
  }
  90% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(7deg);
  }
  100% {
    transform: translateX(-50%) translateY(25%) rotateZ(45deg) skewY(0deg);
  }
}


.preloader {
  position: absolute;
  width: 10%;
  height: 0%;
  padding-bottom: 10%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.preloader div {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  overflow: hidden;
  animation: animatePreloader 1s infinite linear;
  transform-origin: 50% 100%;
}
.preloader div:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  left: 50%;
  top: 50%;
  transform: translateX(-50%);
  border: 3px solid #333;
  border-radius: 50%;
  box-sizing: border-box;
}
.preloader div:nth-child(2) {
  width: 60%;
  height: 60%;
  top: 20%;
  animation: animatePreloader 0.5s infinite linear;
}
@keyframes animatePreloader {
  0% {
    transform: translateX(-50%) translateY(-50%) rotateZ(0deg);
  }
  100% {
    transform: translateX(-50%) translateY(-50%) rotateZ(360deg);
  }
}