HTML
<div class="con">
<div class="head"></div>
<!-- body -->
<div class="body"></div>
<!-- window -->
<div class="window">
</div>
<!-- THE wing -->
<div class="wing wing-l"></div>
<div class="wing wing-r"></div>
<!-- bottom -->
<div class="bottom"></div>
<!-- the Fire -->
<div class="fire"></div>
</div>
CSS
body{background: #233142}
.con {
width: 400px;
height: 400px;
background: #8C82FC;
position: relative;
margin: 7% auto;
border-radius: 50%;
border: 10px solid #94F6F2;
}
.con > * {
position: absolute;
top:0; left:0;
}
.head {
left:31.5%; top: 8%;
border-left: 73px solid transparent;
border-right: 75px solid transparent;
border-bottom: 90px solid #B693FE;
z-index: 2;
}
.body {
width: 160px; height: 200px;
background: #FF9DE2;
left:30%; top: 30%;
border-radius: 10% 10% 90% 80%/30% ;
z-index: 6;
}
.window {
width: 50px; height: 50px;
background: #4BA2AC;
border: 5px solid #50C9BA;
top: 40%;left: 42%;
z-index: 7;
border-radius: 50%;
overflow: hidden;
}
img {
width: 70px;
transition:all .3s linear;
animation: image 2s linear 2;
}
/* anitmio */
@keyframes image {
0% {transform: scale(0.5,0.5);}
50% {transform: rotate(10deg)}
100% {transform: rotate(360deg)}
}
.wing {
left: 10%; top: 65%;
border-left: 80px solid transparent;
border-right: 80px solid transparent;
border-bottom: 50px solid #B693FE;
border-radius: 50%;
transform: rotate(105deg);
}
.wing-r {
left: 50%;
transform: rotate(-105deg);
}
.bottom {
left:40%; top: 76%;
width: 20%; height:10%;
background: #B693FE;
border-radius: 20%;
z-index: 2;
}
.fire {
top: 80%; left: 45%;
width: 40px; height: 50px;
background: #D59BF6;
border-radius: 50%;
z-index: 1;
animation: firemv 3s linear infinite;
}
/* aimation */
@keyframes firemv {
0% {
transform: scale(0.5,0.5);
}
50% {
background: #F75959;
box-shadow: 0px 0px 15px 30px #E35252;
}
80% {
box-shadow: 0px 0px 15px 30px #E35252 ;
height: 20%; background: #F75959;
}
100% {
box-shadow: 0px 0px 15px 40px #Ea5252;
}
}
