A long time ago, we shared an HTML5 based candle flame animation, the burning flame is very realistic. This time we are going to share a cartoon candle animation based on Spring CSS3, the picture is very playful. First, use CSS3 to draw two candles, one large and one small. After the small candle is lit, the large candle playfully blows it out, but the small candle is lit again.
Advertisement
<div class="wrapper"> <div class="candles"> <div class="light__wave"></div> <div class="candle1"> <div class="candle1__body"> <div class="candle1__eyes"> <span class="candle1__eyes-one"></span> <span class="candle1__eyes-two"></span> </div> <div class="candle1__mouth"></div> </div> <div class="candle1__stick"></div> </div> <div class="candle2"> <div class="candle2__body"> <div class="candle2__eyes"> <div class="candle2__eyes-one"></div> <div class="candle2__eyes-two"></div> </div> </div> <div class="candle2__stick"></div> </div> <div class="candle2__fire"></div> <div class="sparkles-one"></div> <div class="sparkles-two"></div> <div class="candle__smoke-one"> </div> <div class="candle__smoke-two"> </div> </div> <div class="floor"> </div> </div>
.wrapper { position: absolute; left: 50%; top: 70%; transform: scale(1.5, 1.5) translate(-50%, -50%); } .floor { position: absolute; left: 50%; top: 50%; width: 350px; height: 5px; background: #673C63; transform: translate(-50%, -50%); box-shadow: 0px 2px 5px #111; z-index: 2; } .candles { position: absolute; left: 50%; top: 50%; width: 250px; height: 150px; transform: translate(-50%, -100%); z-index: 1; } .candle1 { position: absolute; left: 50%; top: 50%; width: 35px; height: 100px; background: #fff; border: 3px solid #673C63; border-bottom: 0px; border-radius: 3px; transform-origin: center right; transform: translate(60%, -25%); box-shadow: -2px 0px 0px #95c6f2 inset; animation: expand-body 3s infinite linear; }
Advertisement