pac-man-pagination

How to create unique Pagination Snippet using CSS

CSS Custom CSS Pagination Programming Web Design

Coding is fun. If you enjoy coding then it expresses through your output. Today I came up with such a fun Snack Pellets Eating Pac-Man Themes CSS Pagination Design. This CSS-only Pac-Man video game-inspired design using radio buttons. Every page is presented by the classic snack pellets dots and clicking on this moves Pac-Man to that page. You can use this pagination on any kind of gaming site.

Let’s start with fun pagination:

Live Demo Link: https://plvmp.csb.app/

Codesandbox Link:https://codesandbox.io/s/pac-man-pagination-snippet-plvmp-plvmp?from-embed 

Let’s See the Design:

 

To create this unique pagination you just need to know Basic HTML and CSS. Let’s start

HTML Part:
To make this unique pagination you just need a parent class name pagination and some input radio button and level.

<div class="pagination">  
        <input id="dot-1" type="radio" name="dots"> 
        <label for="dot-1"></label> 
        <input id="dot-2" type="radio" name="dots">
        <label for="dot-2"></label> 
        <input id="dot-3" type="radio" name="dots" checked="checked">
        <label for="dot-3"></label> 
        <input id="dot-4" type="radio" name="dots">
        <label for="dot-4"></label> 
        <input id="dot-5" type="radio" name="dots">
        <label for="dot-5"></label> 
        <input id="dot-6" type="radio" name="dots">
        <label for="dot-6"></label> 
        <input id="dot-7" type="radio" name="dots">
        <label for="dot-7"></label> 
        <input id="dot-8" type="radio" name="dots">
        <label for="dot-8"></label>
   
      </div>

CSS Part:

Let’s design the pagination:

Create a class called pagination and put the CSS here,

.pagination {
  position: relative;
  display: flex;
  flex-direction: row;
  --ddim: 10px;
  --rd: 15px;
  --rdim: calc(var(--rd) * 2);
  --pm: #ffff03;
}

After adding pagination class CSS now, Add input level CSS

label {
    content: '';
    margin: 0 10px;
    height: var(--ddim);
    width: var(--ddim);
    background: #f7b997;
    cursor: pointer;
  }
  
  label:first-child {margin-left: 0;}
  label:last-child {margin-right: 0;}
  input {display: none;}

After adding parent class and input level CSS now add the pacman class and its CSS and here is it :

.pacman {
    content: '';
    position: absolute;
    top: calc(-1*var(--ddim));
    left: calc(-1*var(--ddim)/2);
    height: var(--rdim);
    width: var(--rdim);
    transition: transform 250ms linear;
  }
  
  .pacman:before,
  .pacman:after {
    content: '';
    position: absolute;
    height: var(--rd);
    width: var(--rdim);
    left: 0;
    background: var(--pm);
    transition: inherit;
  }
  
  .pacman:before {
    top: 0;
    border-top-left-radius: var(--rdim);
    border-top-right-radius: var(--rdim);
    transform-origin: bottom center;
    transform: rotate(-45deg);
  }
  
  .pacman:after {
    bottom: 0;
    border-bottom-left-radius: var(--rdim);
    border-bottom-right-radius: var(--rdim);
    transform-origin: top center;
    transform: rotate(45deg);
  }

Animation part CSS:

For animation here, I use @keyframes.

@keyframes waka {
    0% {}
    50% {transform: rotate(0);}
    100% {}
  }
  
  input[type="radio"]:hover ~ .pacman:before,
  input[type="radio"]:hover ~ .pacman:after {
    animation: waka 500ms infinite;
  }
  
  input[id="dot-1"]:checked ~ .pacman {transform: translateX(var(--ddim));}
  input[id="dot-2"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)));}
  input[id="dot-3"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*2));}
  input[id="dot-4"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*3));}
  input[id="dot-5"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*4));}
  input[id="dot-6"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*5));}
  input[id="dot-7"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*6));}
  input[id="dot-8"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*7));}

Full Source Code of CSS Example:

body {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: black;
  }
  
  .pagination {
    position: relative;
    display: flex;
    flex-direction: row;
    --ddim: 10px;
    --rd: 15px;
    --rdim: calc(var(--rd)*2);
    --pm: #ffff03;
  }
  
  label {
    content: '';
    margin: 0 10px;
    height: var(--ddim);
    width: var(--ddim);
    background: #f7b997;
    cursor: pointer;
  }
  
  label:first-child {margin-left: 0;}
  label:last-child {margin-right: 0;}
  input {display: none;}
  
  .pacman {
    content: '';
    position: absolute;
    top: calc(-1*var(--ddim));
    left: calc(-1*var(--ddim)/2);
    height: var(--rdim);
    width: var(--rdim);
    transition: transform 250ms linear;
  }
  
  .pacman:before,
  .pacman:after {
    content: '';
    position: absolute;
    height: var(--rd);
    width: var(--rdim);
    left: 0;
    background: var(--pm);
    transition: inherit;
  }
  
  .pacman:before {
    top: 0;
    border-top-left-radius: var(--rdim);
    border-top-right-radius: var(--rdim);
    transform-origin: bottom center;
    transform: rotate(-45deg);
  }
  
  .pacman:after {
    bottom: 0;
    border-bottom-left-radius: var(--rdim);
    border-bottom-right-radius: var(--rdim);
    transform-origin: top center;
    transform: rotate(45deg);
  }
  
  @keyframes waka {
    0% {}
    50% {transform: rotate(0);}
    100% {}
  }
  
  input[type="radio"]:hover ~ .pacman:before,
  input[type="radio"]:hover ~ .pacman:after {
    animation: waka 500ms infinite;
  }
  
  input[id="dot-1"]:checked ~ .pacman {transform: translateX(var(--ddim));}
  input[id="dot-2"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)));}
  input[id="dot-3"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*2));}
  input[id="dot-4"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*3));}
  input[id="dot-5"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*4));}
  input[id="dot-6"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*5));}
  input[id="dot-7"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*6));}
  input[id="dot-8"]:checked ~ .pacman {transform: translateX(calc(var(--ddim) + var(--rdim)*7));}

Leave a Reply

Your email address will not be published.