Cara Membuat Animasi pada Inputan

Cara Membuat Animasi pada Inputan - Pernahkah kalian melihat suatu animasi pada sebuah inputan ? pasti sering bukan. Ya, animasi saat ini sudah menjadi elemen penting yang hampir disetiap halaman webiste ada. Karena dengan adanya animasi membuat tampilan website lebih menarik dan lebih hidup lagi tampilan nya. Nah, pada kesempatan kali ini saya akan bagikan tutorial animasi sederhana yaitu bagaimana Cara Membuat Animasi pada Inputan. Bagaiamana cara membuat nya ? Simak langkah langkah nya berikut ini.

Kode HTML

Baiklah kita mulai langkah pertama dengan membuat elemen nya terlenih dahulu, seperti pada judul diatas kita akan gunakan elemen inputan sebagai objek nya. Silahkan buat satu file index.html kemudina ketikan kode HTML berikut untuk membuat elemen inputan nya.

<body>
    <div class="wrapper">
      <form>
        <div class="group-input">      
          <input type="text" required placeholder="Username">
          <span class="highlight"></span>
          <span class="bar"></span>
        </div>
          
        <div class="group-input">      
          <input type="password" required placeholder="Password">
          <span class="highlight"></span>
          <span class="bar"></span>
        </div>

      <input type="button" value="Login">
      </form>
    </div>
</body>

Kode CSS

Setelah membuat elemen inputan nya, langkah selanjutnya adalah memulai untuk mendesain tampilan dan mengatur jarak, layout dan lain sebagainya terutama membuat animasi sederhana pada inputan nya dengan kode CSS berikut ini.

* { box-sizing:border-box; }

.wrapper {
  font-family: 'Roboto';
  width:600px;
  margin:30px auto 0;
  display:block;
  background:#FFF;
  padding:10px 50px 50px;
}

.group-input {
  position: relative;
  margin-bottom: 10px;
}
input[type="text"],
input[type="password"] {
  font-size:16px;
  padding:10px 10px 10px 5px;
  display:block;
  width:300px;
  border:none;
  border-bottom:1px solid #757575;
}
input[type="button"] {
  border: 1px solid #757575;
  padding: 5px 10px;
  background: #d35400;
  color: white;
}
input:focus { outline:none; }

.bar {
  position:relative;
  display:block;
  width:300px;
}
.bar:before,
.bar:after {
  content:'';
  height:2px;
  width:0;
  bottom:1px;
  position:absolute;
  background:#d35400;
  transition:0.2s ease all;
}
.bar:before {left:50%;}
.bar:after {right:50%;}

input:focus ~ .bar:before,
input:focus ~ .bar:after {
  width:50%;
}

.highlight {
  position:absolute;
  height:60%;
  width:100px;
  top:25%;
  left:0;
  pointer-events:none;
  opacity:0.5;
}

input:focus ~ .highlight {
  animation:inputHighlighter 0.3s ease;
}

@-webkit-keyframes inputHighlighter {
    from { background:#d35400; }
  to     { width:0; background:transparent; }
}
@-moz-keyframes inputHighlighter {
    from { background:#d35400; }
  to     { width:0; background:transparent; }
}
@keyframes inputHighlighter {
    from { background:#d35400; }
  to     { width:0; background:transparent; }
}

Setelah kode HTML dan CSS telah diketikan semua, langkah terakhir simpan file nya kemudian kalian bisa melihat hasil akhir nya pada browser masing - masing. Selesai

Bagaimana, cukup menarik bukan tampilan animasi pada inputan nya ? baik, saya cukupkan tutorial sederhana tentang bagaimana Cara Membuat Animasi pada Inputan, semoga bermanfaat selamat mencoba dan sampai jumpa di artikel selanjutnya :)

14 Juli 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat