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.

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

27 Februari 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