Animated Arcade with Pure CSS

Hello everyone

Today we are going to learn how to make an arcade machine with pure CSS, take a look to the final result:

First let's take a look on the individual figures that combined make the arcade happen. I'm going to rely on this image in order to explain this better.

Let's start by making the yellow figure that is all the way to the top, and also we are going to add the screw(purple circle) and the panels.

<div class='machine'>
 <div class='top'></div>
</div>

The div with the "machine" class will be our main container, "top" will be our yellow figure. Next we need a bit of CSS

body{
  background-color:#3d3d3d;
}

.machine{
  width:140px; 
  padding-top:40px;
/*Not needed, CSS only if you want to center vertically and horizontally*/
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  animation:shake .4s infinite;
/*Not needed, CSS only if you want to center vertically and horizontally*/
}

.top{
   width: 60px;
   height: 0px;
   border-right:20px solid transparent;
   border-left: 0px solid transparent;
   border-bottom: 40px solid #3498db;
   position:absolute;
   right:0;
   top:0;
}

In order to make our first figure, first, we need to set up the main container, in this case our arcade is going to be 140px width in total. The top yellow figure is just a little bit tricky since one of the sides is cut off, to achieve this effect we are going to use a trick with the borders. Let me explain with the image below.

We need to define a width, in our case is going to be 60px but we don't need to defined a height, instead we are going to use border-bottom as our height (red element in the image) and a border-right (green element), the border-right is the part we want to delete in order to achieve this effect, this is why we set "transparent" in the border-color and boom! we have our first element.

Let's now add the next figure to our arcade (gray figure) by following the same principle as the last figure.

<div class='machine'>
 <div class='top'></div>
 <div class='screen'></div>
</div>

Let's add another div to our HTML with the class "screen" and in our CSS let's also add:

.screen {
    width:80px;
    height: 0px;
    border-right: 0px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 130px solid #3498db;
}

This will add another figure below the yellow one, we used the same method as the first one but this time we used border-left instead of right.

For the next two figures below the gray one (orange and red), they are only simple div's with height and width, so let's go ahead and add two more div's into our HTML "table" & "bottom".

<div class='machine'>
 <div class='top'></div>
 <div class='screen'></div>
 <div class='table'></div>
 <div class='bottom'></div>
</div>

and also add this CSS:

.bottom{
  width:140px;
  height:100px;
  transform:translateY(-10px);
  background-color:#3498db;
}
.table{
  width:200px;
  height:35px;
  transform:translate(-60px,-1px);
  background-color:#3498db;
}

We are going to use the transform:translate rules in order to accommodate the figures in the right place. Now our Arcade should look like this:

We now have our skeleton ready to set all the little details, let's start by adding the button and the joystick on top of the table. Add two div's inside table with class "button" and "stick" respectively.

<div class='machine'>
     <div class='top'></div>
     <div class='screen'></div>
     <div class='table'>
        <div class='button'></div>
        <div class='stick'></div>
     </div>
     <div class='bottom'></div>
</div>

In our CSS we are going to defined the height, width, background and also use translate:transform to place the figures in the correct place. We are going to use the :after pseudo element in stick in order to place the circle on top of the stick.

.button{
  height:5px;
  width:15px;
  background-color:#f1c40f;
  transform:translate(10px,-5px);
  border-top-right-radius:5px;
  border-top-left-radius:5px;
}

.stick{
  height:20px;
  width:5px;
  background-color:#7f8c8d;
  transform:translate(35px,-25px);
}

.stick:after{
  content:"";
  border-radius:50%;
  height:15px;
  width:15px;
  background-color:#e74c3c;
  position:absolute;
  margin-top:-10px;
  margin-left:-5px;
}

Awesome! Let's add the screen now. In the html add another div with class "monitor".

<div class='machine'>
     <div class='monitor'></div>
     <div class='top'></div>
     <div class='screen'></div>
     <div class='table'>
        <div class='button'></div>
        <div class='stick'></div>
     </div>
     <div class='bottom'></div>
</div>

And in our CSS set "monitor" as an absolute element, with a rotation of 25 degrees so it could fit in our arcade.

.monitor{
  position:absolute;
  height:130px;
  border-top-left-radius:5px;
  border-bottom-left-radius:5px;
  width:3px;
  margin-left:29px;
  transform:rotate(25deg);
  margin-top:-5px;
  background-color:rgb(66, 244, 220);
  box-shadow: -10px 0px 35px 5px rgba(66, 244, 220, .5);
}

We almost done! it is time to add all the little details to the arcade to make it look even better, to make this happen we are going to add div's with "screw", "panel" and "line" classes like in the following HTML:

<div class='machine shake-slow'>
  <div class='shine'></div>
  <div class='top'>
    <div class='screw screwTop'></div>
    <div class='panels'>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
    </div>
  </div>
  <div class='screen'></div>
  <div class='table color'>
    <div class='button'></div>
    <div class='stick'></div>
  </div>
  <div class='bottom color'>
    <div class='line'></div>
    <div class='line'></div>
    <div class='screw screwleftBottom'></div>
    <div class='panels'>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
      <div class='panel'></div>
    </div>
    <div class='screw screwRight'></div>
  </div>
</div>

To make the screws we need to add into our CSS a "screw" class which is going to have the properties for each single screw, we are going to set it up as a absolute figure to place it anywhere we want, after that we can just add a top/bottom and left/right to each single screw.

.screw{
  height:5px;
  width:5px;
  border-radius:50%;
  background-color:#34495e;
  position:absolute;
}

.screwleftBottom{
  bottom:5px;
  left:5px;
}

.screwRight{
  bottom:5px;
  right:5px;
}

.screwTop{
  top:5px;
  left:5px;
}

We are going to follow the same concept for the panels and lines

.panels{
  margin:0 auto;
  text-align:center;
}

.panel{
  height:30px;
  width:3px;
  display:inline-block;
  margin-right:2px;
  margin-top:30px;
  background-color:#34495e;
}

.line{
  background-color:#34495e;
  height:10px;
  width:150px;
  transform:translate(-5px);
  margin-top:10px;
}

.machine:after{
  content:"";
  position:absolute;
  height:230px;
  width:6px;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
  background-color:#34495e;
  margin-left:100%;
  margin-top:-250px;
}


.line{
  background-color:#34495e;
  height:10px;
  width:150px;
  transform:translate(-5px);
  margin-top:10px;
}

And you are done! It should look something like this:

Now, if you want to get really fancy you can add animation to the arcade

@keyframes moveStick{
  0%{transform:translate(35px,-24px) rotate(0deg);}
  30%{transform:translate(35px,-24px) rotate(10deg);}
  60%{transform:translate(35px,-24px) rotate(-10deg);}
}

@keyframes push{
  0%{height:5px;}
  50%{height:4px;
  transform:translate(10px,-4px);}
}

@keyframes shake{
  0%{transform: translate(-50%,-51%) rotate(0deg);}
  30%{transform: translate(-51%,-50%) rotate(1deg);}
  60%{transform: translate(-49%,-50%) rotate(-1deg);}
}

.stick{
  animation: moveStick .5s infinite;
}

.button{
  animation:push .2s infinite;
}

.machine{
  animation:shake .4s infinite;
}

Hope you liked the post, if you have any question, feel free to leave me a comment. :D