<div>
<div class="skinHere">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
:root{
--multipleHere: 2;
}
body, html{
margin: 0;
}
html{
padding: 0;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 15px;
box-sizing: border-box;
}
.skinHere{
position: relative;
height: calc(90px * var(--multipleHere));
width: calc(75px * var(--multipleHere));
animation: calc(1s * var(--multipleHere)) moveHere infinite alternate linear;
}
div:has(> .skinHere){
min-width: calc(130px * var(--multipleHere));
width: calc(130px * var(--multipleHere));
max-width: calc(130px * var(--multipleHere));
}
.skinHere > div{
position: absolute;
}
.skinHere > div:first-child, .skinHere > div:nth-child(2){
left: 50%;
transform: translateX(-50%)
}
.skinHere > div:first-child{
height: calc(15px * var(--multipleHere));
width: calc(15px * var(--multipleHere));
border-radius: 50%;
background: black;
top: 0;
}
.skinHere > div:nth-child(2){
background: black;
top: calc(15px * var(--multipleHere));
height: calc(30px * var(--multipleHere));
width: calc(15px * var(--multipleHere));
border-radius: 5px 5px 0 0;
}
.skinHere > div:nth-child(3), .skinHere > div:nth-child(4){
background: black;
top: calc(15px * var(--multipleHere));
height: calc(30px * var(--multipleHere));
width: calc(5px * var(--multipleHere));
border-radius: 3px;
}
.skinHere > div:nth-child(3){
left: calc(27px * var(--multipleHere));
transform: rotate(25deg) translateX(-50%);
animation: 1s skinThreeHere infinite alternate;
}
.skinHere > div:nth-child(4){
right: calc(27px * var(--multipleHere));
transform: rotate(-25deg) translateX(50%);
animation: 1s skinForHere infinite alternate;
}
.skinHere > div:nth-child(5), .skinHere > div:nth-child(6){
width: calc(5px * var(--multipleHere));
height: calc(25px * var(--multipleHere));
background: black;
top: calc(45px * var(--multipleHere));
animation: 1s scaleHere alternate infinite;
}
.skinHere > div:nth-child(5){
left: calc(39px * var(--multipleHere));
animation-delay: 0.5s;
}
.skinHere > div:nth-child(6){
left: calc(31px * var(--multipleHere));
}
@keyframes moveHere{
from{
left: 0;
}
to{
left: calc(55px * var(--multipleHere));
}
}
@keyframes skinThreeHere{
from{
transform: rotate(25deg) translateX(-50%);
}
to{
transform: rotate(0deg) translateX(50%);
}
}
@keyframes skinForHere{
from{
transform: rotate(-25deg) translateX(50%);
}
to{
transform: rotate(-0deg) translateX(-50%);
}
}
@keyframes scaleHere{
to{
height: 0;
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.