<body>
<div class="bat-container">
<div class="bat">
<div class="row ear-row">
<div class="ear">
<div class="inner-ear"></div>
</div>
<div class="ear">
<div class="inner-ear">
</div>
</div>
</div>
<div class="row wing-row">
<div class="wing open-wing">
</div>
<div class="wing open-wing">
</div>
</div>
<div class="body" >
<div class="shading"></div>
<div class="row eye-row">
<div class="eye">
<div></div>
</div>
<div class="eye">
<div></div>
</div>
</div>
<div class="row closed-wing-row">
<div class="wing closed-wing">
</div>
<div class="wing closed-wing">
</div>
</div>
<div class="nose"></div>
<div class="mouth">
<div class="tooth-row">
<div class="tooth"></div>
<div class="tooth"></div>
</div>
<div class="tongue"></div>
</div>
<div class="tummy"></div>
</div>
</div>
</div>
<script src = "app.js"></script>
</body>body{
background: radial-gradient(
circle,
#a08baf 81%,
#9076a2 98%
);
margin: 5px 0;
display: flex;
justify-content: center;
}
div.bat-container{
overflow: hidden;
min-height: 300px;
max-height: 500px;
min-width: 300px;
width: 99vw;
height: 95vw;
display: flex;
justify-content: center;
align-items: center;
}
div.bat {
width: 90%;
height: 90%;
max-height: 500px;
max-width: 500px;
position: relative;
display: flex;
justify-content: center;
animation: spinIn 5s linear 1;
}
@keyframes spinIn {
0% {
transform: rotate(0deg);
left: -100%
}
100% {
transform: rotate(360deg);
left: 0%;
}
}
@keyframes spinOut {
0% {
transform: rotate(0deg);
left: 0%
}
100% {
transform: rotate(360deg);
left: 100%;
}
}
div.body {
width: 60%;
height: 60%;
border-radius: 50%;
background-color: #434343;
position: relative;
top: 25%;
overflow: hidden;
}
div.body > .shading {
position: absolute;
top: -3%;
border-radius: 50%;
z-index: 999;
left: -3%;
width: 104%;
height: 104%;
box-shadow: inset -9px 0px #555454, inset -9px 0px 12px 12px #555454;
mix-blend-mode: overlay;
}
div.row {
display: flex;
justify-content: space-between;
}
div.wing-row{
position: absolute;
width: 99%;
top: 48%;
height: 18%;
}
div.closed-wing-row {
position: absolute;
width: 100%;
top: 36%;
height: 32%;
z-index: 9999;
}
div.wing {
width: 45%;
height: 100%;
border-radius: 100% 100% 0% 0%;
clip-path: polygon(1% 0%, 1% 100%, 7% 88%, 12% 100%, 19% 88%, 29% 100%, 34% 88%, 43% 100%, 51% 88%, 58% 99%, 65% 90%, 72% 99%, 82% 89%, 88% 100%, 94% 89%, 100% 100%, 100% 0%);
background-color: #434343;
box-shadow: inset 2px 6px 20px 6px #2e2e2e;
}
div.wing.open-wing {
display: none
}
div.wing-row > div.wing:nth-child(1){
animation: leftFlap 0.43s alternate linear infinite
}
div.wing-row > div.wing:nth-child(2){
animation: rightFlap 0.43s alternate linear infinite
}
@keyframes leftFlap {
100%{
transform: rotateZ(10deg);
}
}
@keyframes rightFlap {
100%{
transform: rotateZ(-10deg);
}
}
div.ear-row {
height: 35%;
width: 70%;
position: absolute;
top: 5%;
left: 14.5%;
}
div.ear {
width: 48%;
height: 100%;
border-radius: 8% 50% 50% 50%;
background-color: #434343;
transform: rotate(29deg);
display: flex;
position: relative;
overflow: hidden;
box-shadow: inset -2px 0px 12px 6px #2e2e2e;
}
div.ear:nth-child(2) {
transform: rotate(58deg);
}
div.ear > .inner-ear {
height: 100%;
width: 100%;
border-radius: 50%;
background-color: #ffb6c1;
position: absolute;
box-shadow: inset -2px 0px 12px 6px #f8788b;
}
div.ear:nth-child(1) > .inner-ear{
left: -48%;
bottom: -4%;
}
div.ear:nth-child(2) > .inner-ear{
left: 4%;
top: -49%;
}
div.eye-row {
width: 55%;
height: 55%;
position: absolute;
top: 16%;
left: 22%;
}
div.eye {
height: 38%;
width: 38%;
border: 2px solid white;
background-color: black;
border-radius: 50%;
position: relative
}
div.eye > * {
background-color: white;
border-radius: 50%;
width: 30%;
height: 30%;
position: absolute;
top: 10%;
right: 10%;
}
div.nose {
background-color: #ffb6c1;
border-radius: 50%;
height: 5%;
width: 5%;
position: absolute;
left: 47.5%;
top: 34%;
}
div.mouth {
background-color: black;
width: 25%;
height: 12.5%;
position: absolute;
border-radius: 25% 25% 120% 120%;
display: flex;
flex-direction: column;
top: 43%;
left: 37.5%;
overflow: hidden
}
div.tooth-row {
width: 100%;
height: 45%;
display: flex;
justify-content: space-between;
}
div.tongue {
justify-self: flex-end;
align-self: center;
background-color: #f4455f;
border-radius: 50%;
height: 50%;
width: 70%;
position: relative;
top: 25%;
box-shadow: inset 0px 0px 6px 6px #e93853;
}
div.tooth {
margin: 0.55% 5% 0 5%;
width: 25%;
height: 100%;
clip-path: polygon(0 0%, 50% 100%, 100% 0);
background-color: white;
}
div.tummy {
height: 80%;
width: 90%;
border-radius: 50%;
background-color: #ffb6c1;
position: absolute;
bottom: -50%;
left: 5%;
}const bat = document.querySelector('.bat');
const openWings = document.querySelectorAll('.open-wing')
const closedWings = document.querySelectorAll('.closed-wing')
const rollOut = () => {
setTimeout(()=>{
closedWings.forEach((wing) =>
wing.style.display = "none"
)
openWings.forEach((wing) =>
wing.style.display = "block"
)
}, 5000);
setTimeout(()=>{
closedWings.forEach((wing) =>
wing.style.display = "block"
)
openWings.forEach((wing) =>
wing.style.display = "none"
)
bat.style.animation = "spinOut 5s linear 1"
bat.style.animationFillMode = "forwards"
}, 10000);
setTimeout(() => {
bat.style.animation = "spinIn 5s linear 1"
bat.style.animationFillMode = "forwards"
rollOut()
}, 16000)
}
setTimeout(()=>{
rollOut()
}, 1);
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.