Membuat Animasi Pagination dengan Pseudo Class

Hallo teman-teman, bertemu lagi dengan saya Rizal, dihari yang cerah ini semoga teman-teman selalu diberikan medis dan semangat pada belajar. Di kesempatan kali ini saya akan memberikan panduan cara Merancang Animasi Pagination dengan Pseudo Class.

Sebelum kita masuk ke pembahasan, teman-teman saya sarankan bagi telah lebih dahulu mengenal HTML dan CSS. Kenapa ? karena di dasarnya sebuah tampilan situs itu menggunakan HTML selaku pondasi awal dan CSS selaku styleing sebuah situs.

Oke di pembahasan ini saya anggap teman-teman telah mengenal lebih pada mengenai HTML dan CSS, agar lebih gampang pada memahami pembahasan saya kali ini pada Merancang Animasi Pagination dengan Pseudo Class.

Seketika saja kita mulai, pertama-tama siapkan text-editor yang teman-teman gunakan, kemudian ketik script html dibawah ini :

<nav><span class=text>NEXT</span>
  <div class=left>
    <a href= class=prev></a>
    <a href=>1</a>
    <a href=>2</a>
    <a href=>3</a>
    <span class=line></span>
  </div>
  <div class=right>
    <a href= class=next></a>
    <a href=>4</a>
    <a href=>5</a>
    <a href=>6</a>
    <span class=line></span>
   </div>
</nav>

Seandainya telah simpan file htmlnya, kemudian langkah berikutnya ketik script CSS dibawah ini :

body {
  margin: 0;
  background: #2980b9;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  font-family: Lucida Sans Unicode, Lucida Grande, Sans-Serif;
}
a {
  text-decoration: none;
  outline: none;
  display: block;
  padding: 20px 0;
  width: 40px;
  text-align: center;
  color: white;
  float: left;
}
div {
  position: absolute;
  top: 0;
  opacity: 0;
  width: 40px;
  overflow: hidden;
  transition: .5s linear;
}
.left {
  left: 0;
}
.right {
  right: 0;
}
.line {
  width: 30px;
  height: 2px;
  position: absolute;
  bottom: 10px;
  left: -35px;
  background: white;
  transition: .5s linear .2s;  
}
.left a:nth-child(2):hover   .line,
.right a:nth-child(2):hover   .line {
  left: 5px; 
}
.left a:nth-child(3):hover   .line,
.right a:nth-child(3):hover   .line {
  left: 45px; 
}
.left a:nth-child(4):hover   .line, 
.right a:nth-child(4):hover   .line {
  left: 85px; 
}
nav {
  background: #FCFCFC;
  color: #4D4644;
  position: relative;
  border-radius: 6px;
  overflow: hidden;
  width: 600px;
  text-align: center;
  box-shadow: 0 0 20px rgba(0,0,0,.2);
  transition: .3s linear;
}
.text {
  display: inline-block;
  letter-spacing: 2px;
  padding: 20px 10px;
  cursor: pointer;
}
nav:hover div {
  background: #D8CDC9;
  opacity: 1;
}
div:hover .prev {
  opacity: 0;
  display: none;
}
div:hover .next {
  display: none;
}
div:hover {
  width: auto;
}
.prev:before {
  content: f104;
  font-family: FontAwesome;
}
.next:before {
  content: f105;
  font-family: FontAwesome;
}

Seandainya telah simpan file cssnya, sekiranya teman-teman menggunakan css external karenanya teman-teman dapat menghubungkan antara file html dan file css. Dan sekiranya teman-teman menggunakan css internal karenanya teman-teman hanya perlu menjalankan/run dibrowser yang teman-teman gunakan. Seandainya berhasil karenanya hasilnya akan seperti di gambar dibawah ini :

Bagaimana teman-teman ? lumayan gampang kan pada Merancang Animasi Pagination dengan Pseudo Class.

Lumayan sekianlah pembahasan kali ini mengenai cara Merancang Animasi Pagination dengan Pseudo Class hingga bertemu diartikel berikutnya.

Terimakasih

Sumber https://kursuswebsite.org