TheLazy.Dev
Portfolio GitHub

Blog

css |html

Animated Arcade with Pure CSS

pixmy

Arturo Cabrera

Posted on June 4, 2019

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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);
}
Enter fullscreen mode Exit fullscreen mode

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>
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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

💖 💪 🙅 🚩
pixmy
Arturo Cabrera

Posted on June 4, 2019

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Forsted Glass Effect using html css
html Forsted Glass Effect using html css

November 29, 2024

Easy Animation with Alpine.js
javascript Easy Animation with Alpine.js

November 27, 2024

Create a Infinite Scrolling Marquee with HTML and CSS
webdev Create a Infinite Scrolling Marquee with HTML and CSS

November 26, 2024

Tailwind CSS is such a game changer!!!
webdev Tailwind CSS is such a game changer!!!

November 25, 2024

Progressive Web Applications: Your Ultimate Guide to Modern Web Development
pwa Progressive Web Applications: Your Ultimate Guide to Modern Web Development

November 25, 2024