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));}