Cara Membuat Animasi Underline pada Teks

Cara Membuat Animasi Underline pada Teks -  Pembahasan artikel dumetschool kali ini adalah tentang animasi CSS. Yup, dengan CSS kita bisa membuat berbagai macam desain elemen selain itu itu kita juga bisa membuat animasi dan efek sederhana pada sebuah elemen. Seperti yang akan saya bagikan berikut ini yakni tutorial animasi underline pada teks. Buat kalian yang penasaran ingin mencoba membuat animasi underline bisa simak langkah - langkahnya berikut ini.

Untuk membuat animasi underline pada teks sangat mudah sekali, silahkan kalian buat file index.html lalu kalian bisa ketikan sintak HTML dan membuat elemen teks seperti berikut.

<body>
  <main>
    <span>
      <h5>I L<i class="fas fa-heart"></i>ve</h5>
        <p>INDONESIA</p>
    </span>
  </main>
</body>

Langkah selanjutnya setelah membuat elemen teks seperti diatas adalah mendesain dan membuat animasi underline, untuk membuat animasinya kita akan memanfaatkan properti CSS yakni transition, dan transform untuk arah pergerakannya. Kalian bisa ketikan sintak CSS berikut ini untuk membuat animasinya.

@import url('https://fonts.googleapis.com/css?family=Dancing+Script|Lilita+One&display=swap');
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html, body {
  font-family: 'Lilita One', cursive;
  width: 100%;
  height: 100%;
  font-size: 16px;
}
main {
  display: flex;
  height: 100%;
  align-items: center;
  justify-content: center;
}
p {
  cursor: pointer;
  position: relative;
  display: inline-block;
  font-size: 3rem;
  background: linear-gradient(to bottom, #CD1231, #CD1231 65%, #fff 66%, #fff 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  background-repeat: no-repeat;
  transition: background 0.2s ease-out;
  white-space: nowrap;
}
span {
  position: relative;
}
span:before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 12px;
  background: #CD1231;
  bottom: 7px;
  transition: all 0.2s ease-out;
}
p:hover {
  background-position: 0 11px;
  bottom: 0px;
}
span:hover:before {
  transform: translateY(10px);
}
.fas {
  color: #CD1231;
  font-size: 6px;
}
h5 {
  font-family: 'Dancing Script', cursive;
}

Karena menggunakan icon dari font awesome, jangan lupa kalian wajib meload library CSS dari font awesome seperti berikut.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css">

Jika sudah semua sintak diatas kalian ketikan, silahkan simpan filenya kemdudian kalian bisa lihat hasilnya dibrowser masing - masing, maka akan terlihat seperti gambar dibawah ini.

Cara Membuat Animasi Underline pada Teks

Itulah tutorial sederhana tentang animasi underline, semoga tutorial ini bisa bermanfaat selamat mencoba dan sampai jumpa ditutorial selanjutnya.

20 Februari 2020

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