<div class="frame">
<div class="center">
<div class='flame'></div>
<div class='wick'></div>
<div class='candle'></div>
<div class='stand'></div>
</div>
</div>
// delete the following line if no text is used
// edit the line if you wanna use other fonts
@import url(https://fonts.googleapis.com/css?family=Open+Sans:700,300);
// use only the available space inside the 400x400 frame
.frame {
position: absolute;
top: 50%;
left: 50%;
width: 400px;
height: 400px;
margin-top: -200px;
margin-left: -200px;
border-radius: 2px;
box-shadow: 4px 8px 16px 0 rgba(0,0,0,0.1);
overflow: hidden;
background: #fff;
color: #333;
font-family: 'Open Sans', Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
background-color:#2c3e50;
}
.center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
display:flex;
flex-direction:column;
align-items:center;
}
.candle{
height:100px;
width:60px;
background-color:#fff;
border-radius:2px;
box-shadow:inset -10px -0px 0px #E0E5FF;
}
.stand {
background-color:#1B233E;
width:150px;
height:8px;
border-radius:2px;
}
.wick{
width:4px;
height:15px;
background-color:#AD88A9;
border-radius:2px
}
.flame{
width:10px;
height:20px;
background-color:#FFAD00;
transform : translateY(10px);
animation : flamerun 2s ease-in-out infinite;
border-top-left-radius:20px 60px;
border-top-right-radius:20px 60px;
border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
box-shadow: 5px 5px 20px #FFAD00;
}
@keyframes flamerun{
0% ,100%{
border-top-left-radius:20px 60px;
border-top-right-radius:20px 60px;
border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
}
33%{
border-top-left-radius:15px 50px;
border-top-right-radius:30px 60px;
border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
}
66%{
border-top-left-radius:25px 60px;
border-top-right-radius:10px 70px;
border-bottom-right-radius:10px 15px;
border-bottom-left-radius:20px 15px;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.