Cara Membuat Animasi Garis pada Elemen Input

Cara Membuat Animasi Garis pada Elemen Input - Suatu elemen yang terlihat biasa saja akan sangat menarik jika elemen itu ditambahkan atau dikombinasikan dengan sebuah animasi, seperti pada tutorial yang akan saya bagikan berikut ini mengenai animasi sederhana CSS. Ditutorial ini akan saya praktekan bagaimana Cara Membuat Animasi Garis pada Elemen Input, buat kalian yang suka membuat animasi sederhana dengan CSS tidak ada salahnya bisa kalian coba tutorial berikut sekaligus untuk menambah referensi dalam membuat animasi. Baik langsung saja simak langkah - langkahnya berikut ini.

Langkah 1 : Cara Membuat Animasi Garis pada Elemen Input

Seperti pada judul diatas, kita akan membuat suatu animasi yang akan dikombinasikan dengan elemen input. Nah, silahkan kalian buat file index.html dan ketikan struktur awal untuk membuat elemen input.

<body>
    <div class="container">
        <input type="text" placeholder="Contents..." class="text" >
        <span class="line"></span>
    </div>
</body>

Langkah 2 : Cara Membuat Animasi Garis pada Elemen Input

Setelah membuat satu buah elemen input seperti diatas, langkah selanjutnya kita akan desain tampilannya dan tentunya menambahkan animasi garis yang akan berjalan ketikan kita meng-klik area inputan atau mengisi inputan nya. Silahkan kalian ketikan sintak CSS berikut untuk desain dan juga animasi garisnya.

body {
  background-color: #dfe6e9;
}

.container {
  background-color: #f7f1e3;
  border-top: 8px solid #f53b57;
  height: 180px;
  width: 290px;
}

input[type="text"] {color: #f53b57}
.text {
  background-color: transparent;
  border: none;
  border-bottom: 1px solid #CCC;
  color: #555;
  font-size: 16px;
  left: 40%;
  margin: -25px 0 0 -100px;
  padding: 8px 0px;
  position: relative;
  top: 50%;
  width: 200px;

  &:focus {
    outline: none;    
  }
}

.text:focus+.line {
  transform: scale(1);
}

.line {
  background-color: #f53b57;
  height: 2.5px;
  left: 24px;
  margin-top: 4px;
  position: absolute;
  top: 128px;
  transform: scale(0, 1);
  transition: all 0.5s linear;
  width: 200px;
}

Setelah semua sintak telah diketikan, silahkan simpan filenya kemudian kalian bisa lihat hasilnya pada browser masing - masing.
Bagaiamana, menarik bukan animasi sederhana CSS nya ? Silahkan kalian bisa kembangkan lagi untuk animasi ataupun desainnya supaya tampilan terlihat lebih bagus lagi. Baik cukup sekian tutorial sederhana mengenai bagaimana Cara Membuat Animasi Garis pada Elemen Input, semoga tutorial ini bisa bermanfaat dan selamat mencoba :)

27 Agustus 2018

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