Membuat Animasi Teks Magic dengan CSS

Membuat Animasi Teks Magic dengan CSS - Pada artikel berikut ini saya akan berbagi referensi dan tutorial sederhana mengenai animasi pada sebuah teks, yaitu animasi teks magic. Jika kalian sedang mencari animasi ataupun efek pada suatu objek, tutorial ini cocok sekali untuk kalian coba, karena tutorial ini sangat mudah sekali dan juga sederhana tapi animasi yang ditampilkan cukup menarik. Untuk animasi yang akan kita buat nanti kita akan dibantu dengan CSS untuk menjalankan animasi pada teksnya. Baiklah langsung saja kita akan praktekan bagaimana Membuat Animasi Teks Magic dengan CSS berikut ini.

Langkah 1 : Membuat Animasi Teks Magic dengan CSS

Kita mulai dengan langkah pertama yakni kita akan membuat struktur awal untuk membuat animasi teks magic dan menambahkan beberapa teks sebagai objek animasinya dengan sintak HTML berikut.

<body>
    <div class="wrapper">
      <h1 class="text1">DUMET</h1>
      <h1 class="text2">SCHOOL.</h1>
    </div>
</body>

Langkah 2 : Membuat Animasi Teks Magic dengan CSS

Selanjutnya, barulah kita akan membuat animasi pada teks diatas dengan sintak CSS berikut.

@import url('https://fonts.googleapis.com/css?family=Fredoka+One');
body{
  line-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #EEEEEE;
}
.wrapper{
  position: absolute;
  width: 100%;
  top: 50%;
  bottom: 50%;
  filter: contrast(10);
}
h1{
  font-family: 'Fredoka One', cursive;
  width: 100%;
  text-align: center;
  position: absolute;
  font-size: 100px;
  margin: 0;
  color: #0E69B7;
}

@keyframes animate {
  0%   { opacity: 0; filter: blur(28px)}
  10%  { opacity: 0; }
  90%  { opacity: 1; }
}
.text1{
  animation: animate 6s infinite alternate-reverse;
}
.text2{
  animation: animate 6s infinite alternate;
}

Dengan menambahkan sintak CSS keyframe kita telah atur animasi dengan mengatur blur, dan tingkat opacity dan tentunya animasi pergantian teks seolah - olah teks bergantian seperti magic.
Setelah semua sintak telah diketikan, simpan filenya kemudian silahkan buka dibrowser masing - masing dan lihat hasilnya. Selesai
Baik, itulah tadi tutorial sederhana mengenai Animasi Teks Magic dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah referensi kalian dalam membuat animasi dengan CSS. Selamat mencoba :)

25 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