Halo, jumpa lagi dengan saya, berikut ini akan saya bagikan tutorial mengenai Cara Membuat Animasi Pada Teks Dengan CSS3, ingin tau seperti apa animasi nya ? berikut langkah-langkah nya.
Baik langsung saja, silahkan kalian buka teks editor nya masing-masing, kemudian ketikan kode HTML berikut.
|
1 2 3 4 5 6 7 8 9 10 |
<h1> <span>A</span> <span>M</span> <span>B</span> <span>o</span> <span>o</span> <span>o</span> <span>i</span> <span>!</span> </h1> |
Untuk kalimat nya silahkan kalian bisa isikan bebas, tanpa harus ngikutin kalimat diatas, setelah itu, kita buat animasi nya dengan kode CSS3 berikut.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
html, body { width: 100%; height: 100%; background: #76b852; background: -webkit-linear-gradient(to left, #76b852 , #8DC26F); background: linear-gradient(to left, #76b852 , #8DC26F); overflow: hidden; -webkit-font-smoothing: antialiased; display: flex; justify-content: center; align-items: center; } h1 { height: 100px; } h1 span { position: relative; top: 20px; display: inline-block; animation: bounce .3s ease infinite alternate; font-family: 'Titan One', cursive; font-size: 80px; color: #FFF; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 transparent, 0 7px 0 transparent, 0 8px 0 transparent, 0 9px 0 transparent, 0 10px 10px rgba(0, 0, 0, .4); } h1 span:nth-child(2) { animation-delay: .1s; } h1 span:nth-child(3) { animation-delay: .2s; } h1 span:nth-child(4) { animation-delay: .3s; } h1 span:nth-child(5) { animation-delay: .4s; } h1 span:nth-child(6) { animation-delay: .5s; } h1 span:nth-child(7) { animation-delay: .6s; } h1 span:nth-child(8) { animation-delay: .7s; } @keyframes bounce { 100% { top: -20px; text-shadow: 0 1px 0 #CCC, 0 2px 0 #CCC, 0 3px 0 #CCC, 0 4px 0 #CCC, 0 5px 0 #CCC, 0 6px 0 #CCC, 0 7px 0 #CCC, 0 8px 0 #CCC, 0 9px 0 #CCC, 0 50px 25px rgba(0, 0, 0, .2); } } |
Kalo sudah, simpan terlebih dahulu, kemudian jalankan dibrowser masing-masing dan lihat hasil nya. Selesai
Cukup mudah bukan ? Baik sampai disini tutorial mengenai Cara Membuat Animasi Pada Teks Dengan CSS3, semoga bermanfaat, amin.
Selamat mencoba 🙂