.contain-alien
.head
.top
.bend
View Compiled
body {
background: #333333;
}
.contain-alien {
position: relative;
margin: 150px auto;
width: 70px;
}
.head {
position: absolute;
background: gray;
border-radius: 50%;
width: 70px;
height: 50px;
}
.head:before {
position: absolute;
top: 2px;
left: -3px;
display: block;
background: gray;
border-radius: 50%;
width: 20px;
height: 20px;
content: '';
}
.head:after {
position: absolute;
top: 2px;
left: 53px;
display: block;
background: gray;
border-radius: 50%;
width: 20px;
height: 20px;
content: '';
}
.top {
position: absolute;
top: -28px;
left: 33px;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(100deg);
border-radius: 0 0 50px 50px;
background: gray;
width: 4px;
height: 17px;
-webkit-animation: antenna 1s forwards;
}
.top:after {
position: absolute;
top: -17px;
left: -5px;
display: block;
background: gray;
border-radius: 50%;
width: 15px;
height: 15px;
content: '';
}
.top:before {
position: absolute;
top: -27px;
left: -15px;
display: block;
border: 2px dotted gray;
border-radius: 50%;
opacity: 0;
width: 31px;
height: 31px;
content: '';
-webkit-animation: load 8ms infinite;
-webkit-animation-delay: 1s;
}
.bend {
position: absolute;
top: -13px;
left: 34px;
-webkit-transform-origin: bottom right;
-webkit-transform: rotate(10deg);
background: gray;
width: 4px;
height: 15px;
-webkit-animation: straight 1s forwards;
}
@-webkit-keyframes antenna {
100% {
-webkit-transform: translateX(1px) rotate(0deg);
}
}
@-webkit-keyframes straight {
to {
-webkit-transform: rotate(0deg);
}
}
@-webkit-keyframes load {
from {
opacity: 1;
}
to {
opacity: 1;
-webkit-transform: rotate(360deg);
}
}
View Compiled
// Chrome & Safari eyeballs
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.