Membuat Animasi Multi - Underline Paragraf
Membuat Animasi Multi - Underline Paragraf - Pernahkah kalian membuat garis bawah atau underline pada suatu paragraf ? Mungkin cara ini sudah tidak asing lagi yah kita gunakan didalam paragraf, karena kita tinggal menggunakan properti CSS yaitu dengan memanfaatkan properti text-decoration. Namun kali ini saya akan sedikit mengembangkan underline dengan menmbahkan animasi. Berikut akan saya praktekan Membuat Animasi Multi - Underline Paragraf.
Langkah 1 : Membuat Animasi Multi - Underline Paragraf
Baiklah, langkah pertama buatlah file HTML dan ketikan struktur awal sederhana untuk menambahkan beberapa paragraf sebagai objek untuk animasi underline.
<div id="container">
<h3>Lorem Ipsum..</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent bibendum, lorem vel tincidunt imperdiet, nibh elit laoreet felis, a bibendum nisl tortor non orci. Donec pretium fermentum felis, <a href="#">quis aliquet est rutrum ut. Integer quis massa ut lacus viverra pharetra in eu lacus. Aliquam tempus odio adipiscing diam pellentesque rhoncus.</a> Curabitur a bibendum est. Mauris vehicula cursus risus id luctus. Curabitur accumsan venenatis nibh, non egestas ipsum vulputate ac. <a href="">Vivamus consectetur dolor sit amet enim aliquet eu scelerisque ipsum hendrerit. Donec lobortis suscipit vestibulum.</a> Nullam luctus pellentesque risus in ullamcorper. Nam neque nunc, mattis vitae ornare ut, feugiat a erat. Ut tempus iaculis augue vel pellentesque.</p>
</div>
</body>
Silahkan kalian bisa sesuaikan paragraf, dan sisipkan pula tag a href untuk mengatur underline nya.
Langkah 2 : Membuat Animasi Multi - Underline Paragraf
Setelah membuat struktur seperti diatas, langkah selanjutnya kita akan desain dan tentunya membuat animasi underline terhadap paragraf dengan sintak CSS berikut ini.
@import url('https://fonts.googleapis.com/css?family=Asap');
body {
background: #0C1127;
color: #FFF;
font-family: 'Asap', sans-serif;
}
#container {
width: 500px;
margin: auto;
}
a {
color: #C05E03;
text-decoration: none;
display: inline;
background-image: linear-gradient(to bottom, transparent 20%, currentColor 21%);
background-position: 0 1em;
background-repeat: no-repeat;
background-size: 0% 6px;
transition: background-size 0.5s ease-in-out 0.2s;
}
p {
text-align: justify;
font-size: 16px;
line-height: 20px;
}
a:hover,
a:focus {
background-size: 100% 6px;
transition-delay: 0s;
}
Setelah semua sintak diketikan, silahkan buka pada browser masing - masing dan lihat hasilnya, ketikan kursor diarahkan terhadap paragraf yang diberil link maka akan terjadi suatu animasi multi underline terhadap paragrafnya.
Bagaimana, cukup mudah bukan untuk Membuat Animasi Multi - Underline Paragraf, silahkan kalian bisa kembangkan lagi untuk animasi ataupun desain nya menjadi lebih menarik lagi.
Baik, cukup sekian tutorial sederhana mengenai cara Membuat Animasi Multi - Underline Paragraf, semoga bermanfaat dan selamat mencoba :)
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)
