skip to Main Content

So i wanted to try make a spaceship using pure css and tried to add some details. I added 4 dots in the body of spaceship which i want to give the effect of rotating. Since its a 2d model we will only see the rotation from front just like marquee tag. I added keyframes but it aint smooth. It suddenly cuts the animation when the animation time stops. How can i fix that to make it look like its rotating without any stops. Here is the code:

<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="point1"></div>
      <div class="point2"></div>
      <div class="point3"></div>
      <div class="point4"></div>
    </div>
  </div>
</div>

and css:

   

* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    body {
      background: #333;
    }

    .spaceship {
      position: absolute;
      height: 200px;
      aspect-ratio: 1;
    }

    .spaceship .glass {
      height: 100px;
      aspect-ratio: 1;
      /*   background: red; */
      background: rgba(255, 255, 255, 0.19);
      border-radius: 16px;
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.8px);
      -webkit-backdrop-filter: blur(6.8px);
      border-radius: 50%;
    }

    .spaceship .bottom {
      position: absolute;
      height: 30px;
      width: 100px;
      /*   background: red; */
      border-radius: 20px;
      background-image: linear-gradient(
        to right,
        #af2323,
        #b5242e,
        #bb2739,
        #c02a44,
        #c42e4f
      );
      bottom: 0px;
      display: flex;
      justify-content: center;
      align-items: center;
      /*   flex-direction:space-between; */
      gap: 10px;
      overflow-x: hidden;
    }
    .point1,
    .point2,
    .point3,
    .point4 {
      height: 20px;
      aspect-ratio: 1;
      background: #fff;
      border-radius: 50%;
      animation: move 4s linear infinite;
    }
    @keyframes move {
      0% {
        translate: 100% 0%;
      }
      100% {
        translate: 0% 0%;
      }
    }
<div class="spaceship">
  <div class="glass">
    <div class="bottom">
      <div class="point1"></div>
      <div class="point2"></div>
      <div class="point3"></div>
      <div class="point4"></div>
    </div>
  </div>

</div>

2

Answers


  1. Animate the dots to the distance of the width of one dot plus a gap. This will make the animation seem seamless and infinite. We’d need to add a fifth dot too to ensure that there is a right dot near the end of the animation (before it loops).

    * {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
        }
        body {
          background: #333;
        }
    
        .spaceship {
          position: absolute;
          height: 200px;
          aspect-ratio: 1;
        }
    
        .spaceship .glass {
          height: 100px;
          aspect-ratio: 1;
          /*   background: red; */
          background: rgba(255, 255, 255, 0.19);
          border-radius: 16px;
          box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
          backdrop-filter: blur(6.8px);
          -webkit-backdrop-filter: blur(6.8px);
          border-radius: 50%;
        }
    
        .spaceship .bottom {
          position: absolute;
          height: 30px;
          width: 100px;
          /*   background: red; */
          border-radius: 20px;
          background-image: linear-gradient(
            to right,
            #af2323,
            #b5242e,
            #bb2739,
            #c02a44,
            #c42e4f
          );
          bottom: 0px;
          display: flex;
          justify-content: center;
          align-items: center;
          /*   flex-direction:space-between; */
          gap: 10px;
          overflow-x: hidden;
        }
        .point1,
        .point2,
        .point3,
        .point4,
        .point5 {
          height: 20px;
          aspect-ratio: 1;
          background: #fff;
          border-radius: 50%;
          animation: move 4s linear infinite;
        }
        @keyframes move {
          0% {
            translate: 0 0;
          }
          100% {
            translate: calc(-100% - 10px) 0%;
          }
        }
    <div class="spaceship">
      <div class="glass">
        <div class="bottom">
          <div class="point1"></div>
          <div class="point2"></div>
          <div class="point3"></div>
          <div class="point4"></div>
          <div class="point5"></div>
        </div>
      </div>
    
    </div>
    Login or Signup to reply.
  2. Use gradient to create the dots and then animate the background-position.

    You can also simplify your code like below:

    body {
      background: #333;
    }
    .spaceship {
      display: grid;
      height: 100px; /* control the size */
      aspect-ratio: 1;
    }
    .spaceship:before,
    .spaceship:after {
      content:"";
      grid-area: 1/1;
    }
    .spaceship:before {
      background: rgba(255, 255, 255, 0.19);
      box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      backdrop-filter: blur(6.8px);
      border-radius: 50%;
    }
    .spaceship:after {
      place-self: end center;
      z-index: 1;
      height: 30%;
      aspect-ratio: 3;
      border-radius: 999px;
      background: 
        radial-gradient(#fff 48%,#0000 51%) 0/calc(100%/3),
        linear-gradient(to right, #af2323, #b5242e, #bb2739, #c02a44, #c42e4f);
      animation: m 2s linear infinite;
    }
    @keyframes m {
      to {
        background-position: -50%;
      }
    }
    <div class="spaceship"></div>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search