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