Cara Membuat Animasi Garis pada Elemen Input

27/08/2018    Risman Hakim    328     Website

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 :)

Web Design, HTML CSS, website

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More