Cara Membuat Animasi Gradasi Warna pada Teks dengan CSS

Cara Membuat Animasi Gradasi Warna pada Teks dengan CSS - Penggunaan gradasi warna bisa diaplikasikan pada suatu objek atau elemen pada html, misalnya penggunaan pada background, elemen teks dan yang lainnya. Nah, dikesempatan kali ini saya akan bagikan tutrial sederhana bagaimana gradasi warna akan diaplikasikan pada elemen teks dan nanti akan dikombinasikan dengan animasi sederhana. Buat teman - teman yang ingin mencoba membuat animasi gradasi pada teks silahkan bisa mengikuti langkah - langkahnya berikut ini.

1. Sintak HTML

Langkah pertama untuk membuat animasi gradasi pada teks adalah membuat dan menentukan elemen teksnya terlebih dahulu, pada kasus ini saya akan menerapkan pada satu kalimat teks DUMETSchool. Silahkan teman - teman bisa mengetikan sintak nya berikut ini.

<body>
    <h1 class="text-gradient">DUMETSchool.</h1>
</body>

2. Sintak CSS

Setelah menentukan dan membuat elemen teks seperti diatas, langkah selanjutnya adalah mendesain dan membuat animasi serta gradasi warna pada elemen teksnya. Silahkan teman - teman ketikan sintak CSS untuk gradasi dan animasi pada teks seperti berikut.

@import url('https://fonts.googleapis.com/css?family=Fredoka+One&display=swap');
html {
  height: 100%;
}
body {
    font-family: 'Fredoka One', cursive;
    background: #1C1A1F;
    text-align: center;
    min-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
h1 {
    font-size: 10vw;
}
.text-gradient {
    text-align: center;
    background: linear-gradient(to right, #ffffff 20%, #1c45f5 40%, #1c45f5 60%, #ffffff 80%);
    background-size: 200% auto;
    color: #000;
    background-clip: text;
    text-fill-color: transparent;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: animate 1s linear infinite;
}
@keyframes animate {
  to {
    background-position: 200% center;
  }
}

Sintak CSS diatas telah ditentukan gradasi warna dengan menggunakan properti CSS yakni linear-gradient dan untuk animasi sederhana telah diset dengan metode @keyframes. Setelah semua sintak HTML dan CSS telah diketikan silahkan simpan filenya kemudian buka pada browser masing - masing untuk melihat hasil akhirnya.

Baik, itulah tutorial sederhana Cara Membuat Animasi Gradasi Warna pada Teks dengan CSS, semoga tutorial ini bermanfaat dan selamat mencoba.

19 November 2019

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 Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat