Pure CSS Pac-Man Pagination effect

In this article, we will be creating pagination, If you have a website with lots of pages, you may wish to add some sort of pagination to each page pagination makes navigation easier. In just one click you can navigate to the next page or the page you wish.

HTML Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pac-man</title>
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <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 class="pacman"></div>
    </div>
</body>
</html>

CSS Code:

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: #fdfd04fd;
}

label {
	content: '';
	margin: 0 10px;
	height: var(--ddim);
	width: var(--ddim);
	background: #d46d35;
	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 450ms 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));}

OUTPUT

See also  Animated Solar System In Pure CSS - solar.css

Leave a Reply

Your email address will not be published. Required fields are marked *