Membuat Animasi Teks Melayang dengan CSS

Membuat Animasi Teks Melayang dengan CSS - Dengan adanya CSS3 saat ini membuat developer lebih mudah dalam mendesain suatu tampilan website, selain itu CSS3 juga bisa membuat efek dan animasi sederhana yang lumayan menarik. Misalnya saja kita bisa membuat animasi teks berjalan, animasi warna, dan lain sebagainya. Nah, kali ini akan saya bagikan tutorial animasi dengan CSS3 yakni Membuat Animasi Teks Melayang dengan CSS, buat kalian yang penasaran seperti apa membuatnya, berikut akan saya praktekan.

Langkah 1 : Membuat Animasi Teks Melayang dengan CSS

Baik, kita mulai membuat animasi teks melayang dengan membuat struktur HTML terleih dahulu, dan memasukan huruf sebagai objek animasinya. Silahkan kalian bisa memasukan teks seperti berikut.

<body>
    <div class="wrapper">
      <div class="items" id="items1">D</div>
      <div class="items" id="items2">U</div>
      <div class="items" id="items3">M</div>
      <div class="items" id="items4">E</div>
      <div class="items" id="items5">T</div>
    </div>
</body>

Langkah 2 : Membuat Animasi Teks Melayang dengan CSS

Setelah membuat struktur HTML seperti diatas, selanjutnya kita akan mendesain tampilan dan juga animasi teks melayang dengan cara mengetikan sintak CSS3 berikut ini.

@import url('https://fonts.googleapis.com/css?family=Baloo+Thambi');
body{
    font-family: 'Baloo Thambi', cursive;
}
.wrapper {
    width:800px;
    margin:auto;
}
.items {
    height:100px;
    width: 100px;
    border-radius: 50%;
    line-height: 100px;
    text-align: center;
    background-color:#0984e3;
    float:left;
    font-size:100px;
    padding:20px;
    color:#fff;
    margin-top: 100px;
}

@keyframes animate {
  from { transform:translate(0px, 1000px) }
  to   { transform:translate(0px, 0px) }
}

#items1 { animation:animate 4s; }

#items2 { animation:animate 1s; }

#items3 { animation:animate 5s; }

#items4 { animation:animate 3s; }

#items5 { animation:animate 2s; }

Pada sintak CSS3 diatas, kita bisa lihat ada property transform dan animation yang berfungsi sebagai animasi utama yang ditujukan kepada objek teks.
Setelah semua sintak telah diketikan, silahkan kalian simpan filenya, kemudian kalian bisa membuka pada browser masing - masing dan lihat hasilnya. Maka ketika browser dibuka akan secara otomatis teks yang kita bua akan melayang ke arah atas browser.

Baiklah, cukup sekian tutorial sederhana mengenai bagaimana Membuat Animasi Teks Melayang dengan CSS, semoga tutorial ini bisa bermanfaat dan menambah wawasan dalam membuat animasi dengan CSS3, selamat mencoba :)

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