Space Ship | Learning Axis

HTML

CSS

body {
  background-color: #163040;
  background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><circle opacity="0.5" fill="%23FFFFFF" cx="28.75" cy="22.338" r="0.713"/><circle opacity="0.2" fill="%23FFFFFF" cx="26.75" cy="79.443" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="50" cy="41.884" r="0.308"/><circle fill="%23FFFFFF" cx="12.883" cy="42.25" r="0.367"/><circle opacity="0.4" fill="%23FFFFFF" cx="80" cy="72.818" r="0.307"/><circle opacity="0.5" fill="%23FFFFFF" cx="55.625" cy="12.375" r="0.308"/><circle opacity="0.2" fill="%23FFFFFF" cx="73.307" cy="89.375" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="73" cy="53.884" r="0.308"/><circle opacity="0.5" fill="%23FFFFFF" cx="38.875" cy="89.432" r="0.385"/></svg>');
  background-size: 20rem 20rem;
  background-position: center 0;
  animation: bg 2s linear infinite;
  overflow: hodden;
}
.ship {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 3rem;
  height: 3rem;
  margin: auto;
  animation: move 2s linear infinite alternate;
}
.body {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #e3e3e3;
  box-shadow: inset 0 -5px 5px rgba(22, 48, 64, 0.5);
  z-index: 1000;
}
.eyes {
  width: 1rem;
  position: relative;
  top: 1.5rem;
  left: 1rem;
  animation: eyes 2s ease-in-out infinite alternate;
}
.eye_1, .eye_2 {
  position: absolute;
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: #163040;
  animation: eye 2s ease-in-out infinite alternate;
}
.eye_2 {
  right: 0;
}
.foot_1, .foot_2, .foot_3 {
  position: absolute;
  top: 1.5rem;
  width: 0.4rem;
  height: 3rem;
  border-radius: 50%;
  background: linear-gradient(rgba(227, 227, 227, 0.6), rgba(227, 227, 227, 0.3));
  opacity: 0.5;
}
.foot_1 {
  transform: rotate(25deg);
}
.foot_2 {
  top: 2rem;
  width: 0.37rem;
  left: 1.315rem;
  background: linear-gradient(rgba(227, 227, 227, 0.7) 75%, rgba(227, 227, 227, 0.3));
  opacity: 0.8;
}
.foot_3 {
  transform: rotate(-25deg);
  right: 0;
  background: linear-gradient(rgba(227, 227, 227, 0.6), rgba(227, 227, 227, 0.3));
}
.vawes {
  position: relative;
  top: -2rem;
  left: -2rem;
  width: 7rem;
  height: 7rem;
  fill: none;
}
.wave_1, .wave_2 {
  stroke: rgba(227, 227, 227, 0.7);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2;
  animation: wave 2s infinite linear;
  opacity: 0;
  transform-origin: center;
  animation-delay: 0.1s;
}
.wave_2 {
  animation-delay: 1s;
}
@keyframes wave {
  from { transform: scale(0.45) rotate(0); opacity: 1; }
  to { transform: scale(1) rotate(20deg); opacity: 0;}
}
@keyframes move {
  from { transform: rotate(-10deg);}
  to { transform: rotate(10deg);}
}
@keyframes bg {
  to { background-position: center 20rem;}
}
@keyframes eyes {
  from { transform: translateX(-0.4rem)}
  to { transform: translateX(0.4rem)}
}
@keyframes eye {
  40% { transform: scaleY(1)}
  50% { transform: scaleY(0)}
  60% { transform: scaleY(1)}
}