HTML
<div id="wrap">
<div id="alien">
<div class="body">
<div class="eyes left"></div>
<div class="eyes right"></div>
<div class="mouse"></div>
</div>
<div class="arms left"></div>
<div class="arms right"></div>
<div class="legs left"></div>
<div class="legs right"></div>
<div class="halo-set">
<div class="halo"></div>
<div class="halo"></div>
<div class="halo"></div>
<div class="halo"></div>
<div class="halo"></div>
</div>
</div>
</div>
SCSS
$forecolor: #92cbd9;
$backcolor: #6294a0;
%pseudo {
content: "";
position: absolute;
}
@keyframes walk {
25% {
transform: translate3d(0, 2px, 0);
}
75% {
transform: translate3d(0, -2px, 0);
}
}
@keyframes twinkle {
90% {
transform: scale3d(1, 1, 1);
}
95% {
transform: scale3d(1, 0.1, 1);
}
}
@keyframes walk-right-hand {
25% {
transform: rotate(-10deg);
}
75% {
transform: rotate(10deg);
}
}
@keyframes walk-left-hand {
25% {
transform: rotate(10deg);
}
75% {
transform: rotate(-10deg);
}
}
@keyframes walk-left-foot {
25% {
transform: rotate(25deg);
}
75% {
transform: rotate(-25deg);
}
}
@keyframes walk-right-foot {
25% {
transform: rotate(-25deg);
}
75% {
transform: rotate(25deg);
}
}
body {
background: #646464;
}
#wrap {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#alien {
position: relative;
width: 100px;
height: 180px;
animation: walk 1s linear infinite;
&:before {
@extend %pseudo;
left: -20px;
top: -20px;
width: 120px;
height: 120px;
border: 10px solid rgba(255, 255, 255, 0.8);
border-radius: 50%;
z-index: 99;
}
}
.body {
position: absolute;
top: 49px;
width: 100px;
height: 80px;
background: $forecolor;
&:before {
@extend %pseudo;
top: -50px;
width: 100px;
height: 100px;
background: $forecolor;
border-radius: 50%;
clip: rect(0, 100px, 50px, 0);
}
&:after {
content: '';
position: absolute;
top: 54px;
width: 100px;
height: 50px;
background: $forecolor;
border-radius: 50%;
clip: rect(25px, 100px, 50px, 0);
}
}
.eyes {
position: absolute;
top: 0;
width: 20px;
height: 20px;
background: $backcolor;
border-radius: 50%;
animation: twinkle 5s infinite;
&.left {
left: 30px;
}
&.right {
left: 70px;
}
}
.mouse {
position: absolute;
top: 20px;
left: 45px;
width: 30px;
height: 20px;
border: 5px solid $backcolor;
border-radius: 50%;
box-sizing: border-box;
clip: rect(10px, 30px, 20px, 0);
}
.arms {
position: absolute;
top: 80px;
width: 80px;
&:before {
@extend %pseudo;
top: 0;
width: 80px;
height: 200px;
border: 10px solid #92cbd9;
border-top-width: 20px;
border-radius: 50%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
&:after {
@extend %pseudo;
top: 33px;
width: 12px;
height: 12px;
background: #92cbd9;
border-radius: 50%;
clip: rect(6px, 12px, 12px, 0);
}
&.left {
left: -30px;
animation: walk-left-hand 1s linear infinite;
&:before {
clip: rect(0, 35px, 40px, 0);
}
&:after {
left: 8px;
}
}
&.right {
right: -30px;
animation: walk-right-hand 1s linear infinite;
&:before {
clip: rect(0, 80px, 40px, 45px);
}
&:after {
right: 8px;
}
}
}
.legs {
position: absolute;
top: 140px;
width: 20px;
&:before {
@extend %pseudo;
width: 0;
border: 10px solid transparent;
border-top: 150px solid $forecolor;
clip: rect(0px, 20px, 30px, 0);
}
&:after {
@extend %pseudo;
top: 20px;
left: 2px;
width: 16px;
height: 16px;
background: $forecolor;
border-radius: 50%;
clip: rect(8px, 16px, 16px, 0);
}
&.left {
left: 20%;
animation: walk-left-foot 1s linear infinite;
}
&.right {
right: 20%;
animation: walk-right-foot 1s linear infinite;
}
}
.halo {
position: absolute;
background: rgba(255, 255, 255, 0.15);
border-radius: 50%;
&:nth-child(1) {
width: 30px;
height: 30px;
top: 10px;
right: 10px;
}
&:nth-child(2) {
width: 15px;
height: 15px;
bottom: 35px;
right: 30px;
}
&:nth-child(3) {
width: 13px;
height: 13px;
bottom: 50px;
right: 5px;
}
&:nth-child(4) {
width: 10px;
height: 10px;
bottom: 40px;
right: 18px;
}
}
