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.
<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.
* {
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.
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.
Itulah tutorial sederhana tentang animasi underline, semoga tutorial ini bisa bermanfaat selamat mencoba dan sampai jumpa ditutorial selanjutnya.
Webinar Gratis 2024
Sabtu, 09 Maret 2024
10 Bahasa Rekomendasi Untuk Dipelajari di 2024
Python Developer, Data Science, Web Application
Minggu, 26 Mei 2024, 09.00-13.00 WIB
(4 Jam Membuat Backend di Laravel 11)
